使用 jQuery 返回过滤后的 JSON 响应

Question

我试图在原始 JSON 响应的成功 GET 请求后使用 jQuery 返回过滤的 JSON 响应。原始 JSON 响应是我们 Shopify 商店中针对用户所在的给定集合页面的一系列产品。我正在尝试将完整的 JSON 响应过滤为一个新的 JSON 响应，该响应过滤掉所有不包含用户从下拉列表中选择的标签的产品。用户选择的标签是 getFilterProducts 函数的输入。

以下是 JSON 的示例：

{

    products: [

        {

            "id": 1,

            "title": "white shirt",

            "tags": [

                "small"

                "medium"

                "large"

            ]

        },

        {

            "id": 2,

            "title": "black shirt",

            "tags": [

                "medium"

                "large"

            ]

        },

        {

            "id": 3,

            "title": "blue shirt",

            "tags": [

                "small"

                "medium"

                "large"

            ]

        }

    ]

}      

这是 jQuery GET 的代码：

function getFilterProducts(tag){

    $.ajax({

        type: 'GET',

        url: coll_url + '/products.json',

        dataType: 'json',

        success: function(res){

          var productArray = $(res.products).filter(function() {

              return res.products.tags === tag;

          });

          console.log(productArray);

        },

        error: function(status){

             alert(status);

        }

    })

}

因此，如果用户从下拉列表中选择标签“Small”，它应该找到哪些产品具有“Small”标签，并返回一个新的 JSON 响应，其中仅包含白色和蓝色衬衫。

我觉得我已经很接近了，但我无法理解为什么每个标签的响应都是空的。

Answer 1

利用jQuery.inArray()var productArray = res.products.filter(function(product) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return jQuery.inArray(tag, product.tags) !== -1;});var res = {&nbsp; products: [{&nbsp; &nbsp; &nbsp; "id": 1,&nbsp; &nbsp; &nbsp; "title": "white shirt",&nbsp; &nbsp; &nbsp; "tags": [&nbsp; &nbsp; &nbsp; &nbsp; "small",&nbsp; &nbsp; &nbsp; &nbsp; "medium",&nbsp; &nbsp; &nbsp; &nbsp; "large"&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "id": 2,&nbsp; &nbsp; &nbsp; "title": "black shirt",&nbsp; &nbsp; &nbsp; "tags": [&nbsp; &nbsp; &nbsp; &nbsp; "medium",&nbsp; &nbsp; &nbsp; &nbsp; "large"&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "id": 3,&nbsp; &nbsp; &nbsp; "title": "blue shirt",&nbsp; &nbsp; &nbsp; "tags": [&nbsp; &nbsp; &nbsp; &nbsp; "small",&nbsp; &nbsp; &nbsp; &nbsp; "medium",&nbsp; &nbsp; &nbsp; &nbsp; "large"&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; ]};tag = 'small';var productArray = res.products.filter(function(product) {&nbsp; return jQuery.inArray(tag, product.tags) !== -1;});console.log( productArray );<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

你可以使用 JS（不是 jQuery）Array.prototype.filter()和Array.prototype.includes()const res = {&nbsp; products: [{&nbsp; &nbsp; &nbsp; "id": 1,&nbsp; &nbsp; &nbsp; "title": "white shirt",&nbsp; &nbsp; &nbsp; "tags": [&nbsp; &nbsp; &nbsp; &nbsp; "small",&nbsp; &nbsp; &nbsp; &nbsp; "medium",&nbsp; &nbsp; &nbsp; &nbsp; "large",&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "id": 2,&nbsp; &nbsp; &nbsp; "title": "black shirt",&nbsp; &nbsp; &nbsp; "tags": [&nbsp; &nbsp; &nbsp; &nbsp; "medium",&nbsp; &nbsp; &nbsp; &nbsp; "large",&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "id": 3,&nbsp; &nbsp; &nbsp; "title": "blue shirt",&nbsp; &nbsp; &nbsp; "tags": [&nbsp; &nbsp; &nbsp; &nbsp; "small",&nbsp; &nbsp; &nbsp; &nbsp; "medium",&nbsp; &nbsp; &nbsp; &nbsp; "large",&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; ]};const tag = "small";const productArray = res.products.filter(item => item.tags.includes(tag));console.log(productArray);以下是 jQuer 的.filter()功能及其工作原理的一个小提示：https ://api.jquery.com/filter/

Answer 3

警告：您的 json 格式错误。以下是正确的：{&nbsp; "products": [&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"id": 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"title": "white shirt",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"tags": [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"small",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"medium",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"large"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;]&nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"id": 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"title": "black shirt",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"tags": [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"medium",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"large"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;]&nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"id": 3,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"title": "blue shirt",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"tags": [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"small",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"medium",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"large"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;]&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; ]}这是您要查找的代码：我们检查标签列表中包含我们想要的标签的每个产品。ajax 操作成功后调用filterProducts函数。出于演示目的，我剪切了 ajax 部分。const JSON_DATA = JSON.parse(`{"products":[{"id":1,"title":"white shirt","tags":["small","medium","large"]},{"id":2,"title":"black shirt","tags":["medium","large"]},{"id":3,"title":"blue shirt","tags":["small","medium","large"]}]}`);const TAG = "small";function filterProducts(json_products, tag) {&nbsp; &nbsp;if(json_products === undefined || tag === undefined) return [];&nbsp; &nbsp;&nbsp; &nbsp;return json_products.products.filter((product) =>&nbsp; &nbsp; &nbsp; &nbsp;product.tags.includes(tag)&nbsp; &nbsp;);}console.log(filterProducts(JSON_DATA, TAG));