js如何查找json,显示对应结果?

hellNo 2017-01-11 06:16:44

{
"SkuProduct": [
{
"ProductId": 2547,
"ProductName": "T-shirt",
"SalePrice": 0.03,
"SkuProps": [
{
"PropValueId": 30,
"PropCode": "body_type_cn"
},
{
"PropValueId": 16,
"PropCode": "color_cn"
},
{
"PropValueId": 20,
"PropCode": "size_cn"
}
]
},
{
"ProductId": 2553,
"ProductName": "T-shirt",
"SalePrice": 0.05,
"SkuProps": [
{
"PropValueId": 31,
"PropCode": "body_type_cn"
},
{
"PropValueId": 16,
"PropCode": "color_cn"
},
{
"PropValueId": 20,
"PropCode": "size_cn"
}
]
},
{
"ProductId": 2559,
"ProductName": "T-shirt",
"SalePrice": 0.07,
"SkuProps": [
{
"PropValueId": 30,
"PropCode": "body_type_cn"
},
{
"PropValueId": 16,
"PropCode": "color_cn"
},
{
"PropValueId": 20,
"PropCode": "size_cn"
}
]
},
{
"ProductId": 2563,
"ProductName": "T-shirt",
"SalePrice": 0.08,
"SkuProps": [
{
"PropValueId": 31,
"PropCode": "body_type_cn"
},
{
"PropValueId": 16,
"PropCode": "color_cn"
},
{
"PropValueId": 23,
"PropCode": "size_cn"
}
]
},
{
"ProductId": 2565,
"ProductName": "T-shirt",
"SalePrice": 0.09,
"SkuProps": [
{
"PropValueId": 31,
"PropCode": "body_type_cn"
},
{
"PropValueId": 16,
"PropCode": "color_cn"
},
{
"PropValueId": 20,
"PropCode": "size_cn"
}
]
}
],
"SellProps": [
{
"PropCode": "color_cn",
"PropName": "Color",
"Props": [
{
"Id": 16,
"PName": "Red"
}
]
},
{
"PropCode": "size_cn",
"PropName": "Size",
"Props": [
{
"Id": 20,
"PName": "M"
},
{
"Id": 23,
"PName": "XXL"
}
]
},
{
"PropCode": "body_type_cn",
"PropName": "Type",
"Props": [
{
"Id": 30,
"PName": "165/80A"
},
{
"Id": 31,
"PName": "170/84A"
}
]
}
]
}





循环下面的SellProps ,出来的选项是这样的。。

那如果我选择了xxl, 它对应的id是23,那我应该拿23去上面的skuProduct 去过滤,那对应的 "PropCode": "size_cn",
在skuPorduct 的PropValueId 可以看到并没有23这个id,只有20,也就是 m这个尺寸的id。。
那此时我应该把其他选项都置灰,因为没有此尺码的衣服,其他的选项也是如此,都要去过滤上面对应的id有没有此选项。。

请问大神我如何应该检查,每一次点击其中一个选项,去过滤json返回哪一个应该置灰,或者是可继续点击的呢??
我写了一个函数,各种循环判断,但是各种乱啊。。。
求大神指教。。

...全文
470 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
Go 旅城通票 2017-01-12
  • 打赏
  • 举报
回复
引用 3 楼 imtns59521 的回复:
[quote=引用 2 楼 showbo 的回复:] 其他选项是什么鬼。。你是要过滤掉T-shirt不给选吧,如果没包含选择的size,color,type时就变灰。。如果是用这个
<script>
    var d = {
        "SkuProduct": [
            {
                "ProductId": 2547,
                "ProductName": "T-shirt",
                "SalePrice": 0.03,
                "SkuProps": [
                    {
                        "PropValueId": 30,
                        "PropCode": "body_type_cn"
                    },
                    {
                        "PropValueId": 16,
                        "PropCode": "color_cn"
                    },
                    {
                        "PropValueId": 20,
                        "PropCode": "size_cn"
                    }
                ]
            },
            {
                "ProductId": 2553,
                "ProductName": "T-shirt",
                "SalePrice": 0.05,
                "SkuProps": [
                    {
                        "PropValueId": 31,
                        "PropCode": "body_type_cn"
                    },
                    {
                        "PropValueId": 16,
                        "PropCode": "color_cn"
                    },
                    {
                        "PropValueId": 20,
                        "PropCode": "size_cn"
                    }
                ]
            },
            {
                "ProductId": 2559,
                "ProductName": "T-shirt",
                "SalePrice": 0.07,
                "SkuProps": [
                    {
                        "PropValueId": 30,
                        "PropCode": "body_type_cn"
                    },
                    {
                        "PropValueId": 16,
                        "PropCode": "color_cn"
                    },
                    {
                        "PropValueId": 20,
                        "PropCode": "size_cn"
                    }
                ]
            },
            {
                "ProductId": 2563,
                "ProductName": "T-shirt",
                "SalePrice": 0.08,
                "SkuProps": [
                    {
                        "PropValueId": 31,
                        "PropCode": "body_type_cn"
                    },
                    {
                        "PropValueId": 16,
                        "PropCode": "color_cn"
                    },
                    {
                        "PropValueId": 23,
                        "PropCode": "size_cn"
                    }
                ]
            },
            {
                "ProductId": 2565,
                "ProductName": "T-shirt",
                "SalePrice": 0.09,
                "SkuProps": [
                    {
                        "PropValueId": 31,
                        "PropCode": "body_type_cn"
                    },
                    {
                        "PropValueId": 16,
                        "PropCode": "color_cn"
                    },
                    {
                        "PropValueId": 20,
                        "PropCode": "size_cn"
                    }
                ]
            }
        ],
        "SellProps": [
            {
                "PropCode": "color_cn",
                "PropName": "Color",
                "Props": [
                    {
                        "Id": 16,
                        "PName": "Red"
                    }
                ]
            },
            {
                "PropCode": "size_cn",
                "PropName": "Size",
                "Props": [
                    {
                        "Id": 20,
                        "PName": "M"
                    },
                    {
                        "Id": 23,
                        "PName": "XXL"
                    }
                ]
            },
            {
                "PropCode": "body_type_cn",
                "PropName": "Type",
                "Props": [
                    {
                        "Id": 30,
                        "PName": "165/80A"
                    },
                    {
                        "Id": 31,
                        "PName": "170/84A"
                    }
                ]
            }
        ]
    }
</script>
T-shirt
<div id="dvTShirt"></div>
Color
<div id="dvColor"></div>
Size
<div id="dvSize"></div>
Type
<div id="dvType"></div>
<style>
    a{display:inline-block;padding:5px;background:#eee;margin-right:10px;cursor:pointer}
    a.selected{background:green;color:#fff}
    a.disabled{background:#666;color:#fff}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    //注意下面的自定义属性
    $('#dvTShirt').append($(d.SkuProduct).map(function (i, v) { return '<a type="' + v.SkuProps[0].PropValueId + '" color="' + v.SkuProps[1].PropValueId + '" size="' + v.SkuProps[2].PropValueId + '" price="' + v.SalePrice + '">T' + v.ProductId + '</a>' }).get().join(''));
    $('#dvColor').append($(d.SellProps[0].Props).map(function (i, v) { return '<a vid="' + v.Id + '">' + v.PName + '</a>' }).get().join('')).find('a').click(filter);
    $('#dvSize').append($(d.SellProps[1].Props).map(function (i, v) { return '<a vid="' + v.Id + '">' + v.PName + '</a>' }).get().join('')).find('a').click(filter);
    $('#dvType').append($(d.SellProps[2].Props).map(function (i, v) { return '<a vid="' + v.Id + '">' + v.PName + '</a>' }).get().join('')).find('a').click(filter);
    function filter() {
        $(this).toggleClass('selected').siblings().removeClass('selected');
        var color = $('#dvColor a.selected').attr('vid'), size = $('#dvSize a.selected').attr('vid'), type = $('#dvType a.selected').attr('vid'), hit;
        $('#dvTShirt a').each(function () {
            hit = true;
            if (color) hit = this.getAttribute('color') == color;
            if (hit && size) hit = this.getAttribute('size') == size;
            if (hit && type) hit = this.getAttribute('type') == type;
            this.className = hit ? '' : 'disabled'
        });
    }
</script>
大神就是这个意思。。太牛了 那如果我选中Red,XXL ,这个时候只有170可以选,165对应的T恤都是没有货的,那此时应该让165的按钮不可点,就是每次点击都让对应没货的选项置灰,应该怎么filter呢。。。 真的太牛了,我参考你的试了半天,。但是失败了。。[/quote] 你通过第一个T-Shit里面的,选出没有disabled属性的a,就可以得到可以选的color/size/type属性的了,自己判断下哪个属性没选,通过T-SHirt选出的属性如果没有包含对应的想就禁用
hellNo 2017-01-12
  • 打赏
  • 举报
回复
引用 2 楼 showbo 的回复:
其他选项是什么鬼。。你是要过滤掉T-shirt不给选吧,如果没包含选择的size,color,type时就变灰。。如果是用这个
<script>
    var d = {
        "SkuProduct": [
            {
                "ProductId": 2547,
                "ProductName": "T-shirt",
                "SalePrice": 0.03,
                "SkuProps": [
                    {
                        "PropValueId": 30,
                        "PropCode": "body_type_cn"
                    },
                    {
                        "PropValueId": 16,
                        "PropCode": "color_cn"
                    },
                    {
                        "PropValueId": 20,
                        "PropCode": "size_cn"
                    }
                ]
            },
            {
                "ProductId": 2553,
                "ProductName": "T-shirt",
                "SalePrice": 0.05,
                "SkuProps": [
                    {
                        "PropValueId": 31,
                        "PropCode": "body_type_cn"
                    },
                    {
                        "PropValueId": 16,
                        "PropCode": "color_cn"
                    },
                    {
                        "PropValueId": 20,
                        "PropCode": "size_cn"
                    }
                ]
            },
            {
                "ProductId": 2559,
                "ProductName": "T-shirt",
                "SalePrice": 0.07,
                "SkuProps": [
                    {
                        "PropValueId": 30,
                        "PropCode": "body_type_cn"
                    },
                    {
                        "PropValueId": 16,
                        "PropCode": "color_cn"
                    },
                    {
                        "PropValueId": 20,
                        "PropCode": "size_cn"
                    }
                ]
            },
            {
                "ProductId": 2563,
                "ProductName": "T-shirt",
                "SalePrice": 0.08,
                "SkuProps": [
                    {
                        "PropValueId": 31,
                        "PropCode": "body_type_cn"
                    },
                    {
                        "PropValueId": 16,
                        "PropCode": "color_cn"
                    },
                    {
                        "PropValueId": 23,
                        "PropCode": "size_cn"
                    }
                ]
            },
            {
                "ProductId": 2565,
                "ProductName": "T-shirt",
                "SalePrice": 0.09,
                "SkuProps": [
                    {
                        "PropValueId": 31,
                        "PropCode": "body_type_cn"
                    },
                    {
                        "PropValueId": 16,
                        "PropCode": "color_cn"
                    },
                    {
                        "PropValueId": 20,
                        "PropCode": "size_cn"
                    }
                ]
            }
        ],
        "SellProps": [
            {
                "PropCode": "color_cn",
                "PropName": "Color",
                "Props": [
                    {
                        "Id": 16,
                        "PName": "Red"
                    }
                ]
            },
            {
                "PropCode": "size_cn",
                "PropName": "Size",
                "Props": [
                    {
                        "Id": 20,
                        "PName": "M"
                    },
                    {
                        "Id": 23,
                        "PName": "XXL"
                    }
                ]
            },
            {
                "PropCode": "body_type_cn",
                "PropName": "Type",
                "Props": [
                    {
                        "Id": 30,
                        "PName": "165/80A"
                    },
                    {
                        "Id": 31,
                        "PName": "170/84A"
                    }
                ]
            }
        ]
    }
</script>
T-shirt
<div id="dvTShirt"></div>
Color
<div id="dvColor"></div>
Size
<div id="dvSize"></div>
Type
<div id="dvType"></div>
<style>
    a{display:inline-block;padding:5px;background:#eee;margin-right:10px;cursor:pointer}
    a.selected{background:green;color:#fff}
    a.disabled{background:#666;color:#fff}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    //注意下面的自定义属性
    $('#dvTShirt').append($(d.SkuProduct).map(function (i, v) { return '<a type="' + v.SkuProps[0].PropValueId + '" color="' + v.SkuProps[1].PropValueId + '" size="' + v.SkuProps[2].PropValueId + '" price="' + v.SalePrice + '">T' + v.ProductId + '</a>' }).get().join(''));
    $('#dvColor').append($(d.SellProps[0].Props).map(function (i, v) { return '<a vid="' + v.Id + '">' + v.PName + '</a>' }).get().join('')).find('a').click(filter);
    $('#dvSize').append($(d.SellProps[1].Props).map(function (i, v) { return '<a vid="' + v.Id + '">' + v.PName + '</a>' }).get().join('')).find('a').click(filter);
    $('#dvType').append($(d.SellProps[2].Props).map(function (i, v) { return '<a vid="' + v.Id + '">' + v.PName + '</a>' }).get().join('')).find('a').click(filter);
    function filter() {
        $(this).toggleClass('selected').siblings().removeClass('selected');
        var color = $('#dvColor a.selected').attr('vid'), size = $('#dvSize a.selected').attr('vid'), type = $('#dvType a.selected').attr('vid'), hit;
        $('#dvTShirt a').each(function () {
            hit = true;
            if (color) hit = this.getAttribute('color') == color;
            if (hit && size) hit = this.getAttribute('size') == size;
            if (hit && type) hit = this.getAttribute('type') == type;
            this.className = hit ? '' : 'disabled'
        });
    }
</script>
大神就是这个意思。。太牛了 那如果我选中Red,XXL ,这个时候只有170可以选,165对应的T恤都是没有货的,那此时应该让165的按钮不可点,就是每次点击都让对应没货的选项置灰,应该怎么filter呢。。。 真的太牛了,我参考你的试了半天,。但是失败了。。
Go 旅城通票 2017-01-11
  • 打赏
  • 举报
回复
其他选项是什么鬼。。你是要过滤掉T-shirt不给选吧,如果没包含选择的size,color,type时就变灰。。如果是用这个
<script>
    var d = {
        "SkuProduct": [
            {
                "ProductId": 2547,
                "ProductName": "T-shirt",
                "SalePrice": 0.03,
                "SkuProps": [
                    {
                        "PropValueId": 30,
                        "PropCode": "body_type_cn"
                    },
                    {
                        "PropValueId": 16,
                        "PropCode": "color_cn"
                    },
                    {
                        "PropValueId": 20,
                        "PropCode": "size_cn"
                    }
                ]
            },
            {
                "ProductId": 2553,
                "ProductName": "T-shirt",
                "SalePrice": 0.05,
                "SkuProps": [
                    {
                        "PropValueId": 31,
                        "PropCode": "body_type_cn"
                    },
                    {
                        "PropValueId": 16,
                        "PropCode": "color_cn"
                    },
                    {
                        "PropValueId": 20,
                        "PropCode": "size_cn"
                    }
                ]
            },
            {
                "ProductId": 2559,
                "ProductName": "T-shirt",
                "SalePrice": 0.07,
                "SkuProps": [
                    {
                        "PropValueId": 30,
                        "PropCode": "body_type_cn"
                    },
                    {
                        "PropValueId": 16,
                        "PropCode": "color_cn"
                    },
                    {
                        "PropValueId": 20,
                        "PropCode": "size_cn"
                    }
                ]
            },
            {
                "ProductId": 2563,
                "ProductName": "T-shirt",
                "SalePrice": 0.08,
                "SkuProps": [
                    {
                        "PropValueId": 31,
                        "PropCode": "body_type_cn"
                    },
                    {
                        "PropValueId": 16,
                        "PropCode": "color_cn"
                    },
                    {
                        "PropValueId": 23,
                        "PropCode": "size_cn"
                    }
                ]
            },
            {
                "ProductId": 2565,
                "ProductName": "T-shirt",
                "SalePrice": 0.09,
                "SkuProps": [
                    {
                        "PropValueId": 31,
                        "PropCode": "body_type_cn"
                    },
                    {
                        "PropValueId": 16,
                        "PropCode": "color_cn"
                    },
                    {
                        "PropValueId": 20,
                        "PropCode": "size_cn"
                    }
                ]
            }
        ],
        "SellProps": [
            {
                "PropCode": "color_cn",
                "PropName": "Color",
                "Props": [
                    {
                        "Id": 16,
                        "PName": "Red"
                    }
                ]
            },
            {
                "PropCode": "size_cn",
                "PropName": "Size",
                "Props": [
                    {
                        "Id": 20,
                        "PName": "M"
                    },
                    {
                        "Id": 23,
                        "PName": "XXL"
                    }
                ]
            },
            {
                "PropCode": "body_type_cn",
                "PropName": "Type",
                "Props": [
                    {
                        "Id": 30,
                        "PName": "165/80A"
                    },
                    {
                        "Id": 31,
                        "PName": "170/84A"
                    }
                ]
            }
        ]
    }
</script>
T-shirt
<div id="dvTShirt"></div>
Color
<div id="dvColor"></div>
Size
<div id="dvSize"></div>
Type
<div id="dvType"></div>
<style>
    a{display:inline-block;padding:5px;background:#eee;margin-right:10px;cursor:pointer}
    a.selected{background:green;color:#fff}
    a.disabled{background:#666;color:#fff}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    //注意下面的自定义属性
    $('#dvTShirt').append($(d.SkuProduct).map(function (i, v) { return '<a type="' + v.SkuProps[0].PropValueId + '" color="' + v.SkuProps[1].PropValueId + '" size="' + v.SkuProps[2].PropValueId + '" price="' + v.SalePrice + '">T' + v.ProductId + '</a>' }).get().join(''));
    $('#dvColor').append($(d.SellProps[0].Props).map(function (i, v) { return '<a vid="' + v.Id + '">' + v.PName + '</a>' }).get().join('')).find('a').click(filter);
    $('#dvSize').append($(d.SellProps[1].Props).map(function (i, v) { return '<a vid="' + v.Id + '">' + v.PName + '</a>' }).get().join('')).find('a').click(filter);
    $('#dvType').append($(d.SellProps[2].Props).map(function (i, v) { return '<a vid="' + v.Id + '">' + v.PName + '</a>' }).get().join('')).find('a').click(filter);
    function filter() {
        $(this).toggleClass('selected').siblings().removeClass('selected');
        var color = $('#dvColor a.selected').attr('vid'), size = $('#dvSize a.selected').attr('vid'), type = $('#dvType a.selected').attr('vid'), hit;
        $('#dvTShirt a').each(function () {
            hit = true;
            if (color) hit = this.getAttribute('color') == color;
            if (hit && size) hit = this.getAttribute('size') == size;
            if (hit && type) hit = this.getAttribute('type') == type;
            this.className = hit ? '' : 'disabled'
        });
    }
</script>
qprevf 2017-01-11
  • 打赏
  • 举报
回复
//var youclass=JSON.parse(jsonstr); youclass.SellProps[0].PropCode,这种格式就能访问对应成员, 逻辑判断你自己做~~~~

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧