使用 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) {

              return jQuery.inArray(tag, product.tags) !== -1;

});

var res = {

  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"

      ]

    }

  ]

};

tag = 'small';

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

  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 = {

  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";

const productArray = res.products.filter(item => item.tags.includes(tag));

console.log(productArray);

以下是 jQuer 的.filter()功能及其工作原理的一个小提示：https ://api.jquery.com/filter/

Answer 3

警告：您的 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"

         ]

       }

    ]

}

这是您要查找的代码：

我们检查标签列表中包含我们想要的标签的每个产品。

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) {

   if(json_products === undefined || tag === undefined) return [];

   

   return json_products.products.filter((product) =>

       product.tags.includes(tag)

   );

}

console.log(filterProducts(JSON_DATA, TAG));