使用 jQuery grep() 过滤 JSON 数组

Posted 2023-05-09

【中文标题】使用 jQuery grep() 过滤 JSON 数组

【英文标题】：Filtering JSON array using jQuery grep()

【发布时间】：2014-02-05 23:31:22

【问题描述】：

我在这个网站上搜索了很多示例，但似乎无法满足我的需求。我只需要使用grep() 过滤一些 JSON 结果。

下面是我的 JSON：

var data =  "items": [
    
        "id":       1,
        "category": "cat1"
    ,
            
        "id":       2,
        "category": "cat2"
    ,
    
        "id":       3,
        "category": "cat1"
    
]

上面的例子

如何退回所有类别为cat1 的商品？ 如何退回所有类别为 cat1 和 id 的项目 3 ？

我知道这不是一个很好的例子，但任何帮助都会很棒！谢谢！

我尝试了以下变体

data.items = $.grep(data.items, function(element, index) 
    return element.id == 1;
    console.log(data.items);
);

【问题讨论】：

你读过the documenation吗？你有没有尝试过？

循环遍历所有项目，将它们保存到新变量并返回该变量？

是的，我已经阅读了文档，我尝试了很多不同的示例组合，我将示例添加到我的帖子中。

除了错位的console.log()，我在你的例子中看不到问题。

看起来对我来说效果很好：jsfiddle.net/62kx2.

【参考方案1】：

var data = 
    "items": [
        "id": 1,
        "category": "cat1"
    , 
        "id": 2,
        "category": "cat2"
    , 
        "id": 3,
        "category": "cat1"
    ]
;

var returnedData = $.grep(data.items, function (element, index) 
    return element.id == 1;
);


alert(returnedData[0].id + "  " + returnedData[0].category);

returnedData 正在返回一个对象数组，因此您可以通过数组索引访问它。

http://jsfiddle.net/wyfr8/913/

【讨论】：

我将 console.log 放在了错误的位置，所以我没有看到它。

【参考方案2】：

var data = 
  "items": [
    "id": 1,
    "category": "cat1"
  , 
    "id": 2,
    "category": "cat2"
  , 
    "id": 3,
    "category": "cat1"
  , 
    "id": 4,
    "category": "cat2"
  , 
    "id": 5,
    "category": "cat1"
  ]
;
//Filters an array of numbers to include only numbers bigger then zero.
//Exact Data you want...
var returnedData = $.grep(data.items, function(element) 
  return element.category === "cat1" && element.id === 3;
, false);
console.log(returnedData);
$('#id').text('Id is:-' + returnedData[0].id)
$('#category').text('Category is:-' + returnedData[0].category)
//Filter an array of numbers to include numbers that are not bigger than zero.
//Exact Data you don't want...
var returnedOppositeData = $.grep(data.items, function(element) 
  return element.category === "cat1";
, true);
console.log(returnedOppositeData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id='id'></p>
<p id='category'></p>

$.grep() 方法根据需要从数组中删除项目，以便仅剩余项目进行给定的搜索。测试是一个函数，它传递一个数组项和数组中该项的索引。只有当测试返回 true 时，项目才会在结果数组中。