在 jQuery 或 vanilla JavaScript 中过滤 JSON 数据

Posted

技术标签:

【中文标题】在 jQuery 或 vanilla JavaScript 中过滤 JSON 数据【英文标题】:Filtering JSON data in jQuery or vanilla JavaScript 【发布时间】:2017-08-26 00:01:07 【问题描述】:

我想在 jQuery 或 vanilla javascript 中过滤我的 JSON 对象。我更喜欢 vanilla JavaScript,但不知道如何解决这个问题。我创建了伪代码来解释我想要实现的目标。有什么想法吗?

我基本上只想允许不包含列表中的值的记录。第一个列表仅包含应从 expJSON 中排除的 mfs 值。第二个列表包含应该从 expJSON 中排除的 pn 值,依此类推...

伪代码

var results = $(jsonData).filter(function (i, n) 
        return if list1 is not empty: (n.psn.indexOf(item1 from list1) === -1 || n.psn.indexOf(item2 from list1) === -1 || n.psn.indexOf(item3 from list1) === -1 ... ) &&
        if list2 is not empty: (n.pn.indexOf(item1 from list2) === -1 || n.pn.indexOf(item2 from list2) === -1 || n.pn.indexOf(item3 from list2) === -1 ... ) &&
        if list3 is not empty: (n.mft.indexOf(item1 from list3) === -1 || n.mft.indexOf(item2 from list3) === -1 || n.mft.indexOf(item3 from list3) === -1 ... ) &&
        if list4 is not empty: (n.sl.indexOf(item1 from list4) === -1 || n.sl.indexOf(item2 from list4) === -1 || n.sl.indexOf(item3 from list4) === -1 ... ) &&
        if list5 is not empty: (n.vtv.indexOf(item1 from list5) === -1 || n.vtv.indexOf(item2 from list5) === -1 || n.vtv.indexOf(item3 from list5) === -1 ... )
    )

jsonData

["mft": "asjfasdf", "pn": "234awefwa", "vtv": "No", "psn": "234fasdfa", "sl": "asf8sf", "mft": "fsjldfd98sf9d", "pn": "skfjsdf7df", "vtv": "Yes", "psn": "tfs76fdfd", "sl": "basd7f", "mft": "fbsdf8df", "pn": "898723923", "vtv": "No", "psn": "fs7daf6sd", "sl": "f7s6df", "mft": "sdf7688sdf76f", "pn": "131d21", "vtv": "Yes", "psn": "t23yt342y23", "sl": "bfldk34" ...]

list1、list2、list3、list4、list5

              item1     item2    item3
list1/mft = ["word1", "word2", "word3", ...]
list2/pn = ["word1", "word2", "word3", ...]
list3/vtv = ["word1", "word2", "word3", ...]
list4/psn = ["word1", "word2", "word3", ...]
list5/sl = ["word1", "word2", "word3", ...]

【问题讨论】:

我有点不清楚你想要什么,你能否让你的 jsonData 与你的列表匹配,以便我们可以准确地看到之前/之后? 我想显示 jsonData 中不包含列表值的记录。每个列表都包含 json 记录中键的值。 我已更新列表名称 每个对象总是有相同的键吗?每个对象都会有 mft、pn、vtv、psn 和 sl 吗? 可以,但列表可以为空 【参考方案1】:

如果我正确理解了这个问题,这应该可以为您解决。

// this is based on the jsonData provided
// but I deleted some values cause you said it might not always have a value
var jsonData = [
    "mft": "asjfasdf", "pn": "234awefwa", "vtv": "", "psn": "234fasdfa", "sl": "asf8sf",
    "mft": "fsjldfd98sf9d", "pn": "skfjsdf7df", "vtv": "Yes", "psn": "tfs76fdfd", "sl": "basd7f",
    "mft": "", "pn": "898723923", "vtv": "No", "psn": "fs7daf6sd", "sl": "f7s6df",
    "mft": "sdf7688sdf76f", "pn": "", "vtv": "Yes", "psn": "t23yt342y23", "sl": "bfldk34",
    "mft": "sdf7688sdf76f", "pn": "131d21", "vtv": "Yes", "psn": "t23yt342y23", "sl": ""]

var keys = ['mft', 'pn', 'vtv', 'psn', 'sl']
var mftList = []
var pnList = []
var vtvList = []
var psnList = []
var slList = []

jsonData.forEach(function(data) 
    keys.forEach(function(key)
       var value = data[key];
       if(!value) return;

       switch (key) 
           case 'mft': 
                mftList.push(value)
                break;
           
           case 'pn': 
                pnList.push(value)
                break;
           
           case 'vtv': 
                vtvList.push(value)
                break;
           
           case 'psn': 
                psnList.push(value)
                break;
           
           case 'sl': 
                slList.push(value)
                break;
           
        
    );
);

【讨论】:

您的列表似乎已输出。但就我而言,我希望它们成为输入列表。我基本上只想允许不包含列表中的值的记录。第一个列表仅包含应从 expJSON 中排除的 mfs 值。第二个列表包含应该从 expJSON 中排除的 pn 值,依此类推... 请提供一个示例,显示您要输入的确切数据,以及完成后的样子。【参考方案2】:

我猜你的意思类似于以下内容?

我只是简单地使用Array.filter 来归档 JSON 对象中的每个对象。然后在 for 循环中为对象中的每个项目添加一个简单的 switch 语句,以便将它们“过滤”到正确的列表中。


更新!在进一步审查您的问题以及您在 cmets 中提出的问题后,我相信您所寻求的更像是以下内容。我将循环更改为只允许对象返回在给定列表中找不到所述子项的位置。希望这就是你正在寻找的!祝你好运!

var expJSON = ["mft": "asjfasdf", "pn": "234awefwa", "vtv": "No", "psn": "234fasdfa", "sl": "asf8sf", "mft": "fsjldfd98sf9d", "pn": "skfjsdf7df", "vtv": "Yes", "psn": "tfs76fdfd", "sl": "basd7f", "mft": "fbsdf8df", "pn": "898723923", "vtv": "No", "psn": "fs7daf6sd", "sl": "f7s6df", "mft": "sdf7688sdf76f", "pn": "131d21", "vtv": "Yes", "psn": "t23yt342y23", "sl": "bfldk34"];
function filterOutOfMainList(obj, ind, $this) 
  for (var x in obj) switch(x) 
    case 'mft': 
      if (list1.indexOf(obj[x]) > -1) return;
      break;
    case 'pn': 
      if (list2.indexOf(obj[x]) > -1) return;
      break;
    case 'vtv': 
      if (list3.indexOf(obj[x]) > -1) return;
      break;
    case 'psn': 
      if (list4.indexOf(obj[x]) > -1) return;
      break;
    case 'sl': 
      if (list5.indexOf(obj[x]) > -1) return;
      break;
  
  return obj;

var list1 = ["example->", "fsjldfd98sf9d"], //  mft
  list2 = ["word1", "word2", "etc"], //  pn
  list3 = ["Yes"], //  vtv
  list4 = ["word1", "word2", "etc"], //  psn
  list5 = ["word1", "word2", "etc"]; //  sl
console.log(expJSON.filter(filterOutOfMainList));
<h1>Using your JSON as example. Vanilla!</h1>

【讨论】:

据我了解,您是否会从 expJSON 中过滤掉所有不包含 list1、list2、list3、list4、list5 值的记录? 您的列表似乎已输出。但就我而言,我希望它们成为输入列表。我基本上只想允许不包含列表中的值的记录。第一个列表仅包含应从 expJSON 中排除的 mfs 值。第二个列表包含应从 expJSON 中排除的 pn 值,依此类推... @Engo 我更新了我的答案并将我的解决方案更改为使用给定列表进行反向过滤。我继续填写了几个示例词,以便在您运行它时更改您在控制台中看到的 JSON 的最终结果。祝你好运!【参考方案3】:

因此,这里有一些非常基本且未经过深思熟虑的未优化代码,它们应该可以满足您的需求:

function getLists(data)
  var output=
  var keys = ['mft', 'pn', 'vtv', 'psn', 'sl'];
  for(var i = 0; i < keys.length; i++)
    var current = keys[i];
    output[current] = [];
    for(var j = 0; j < data.length; j++)
      if(data[j][current)
        output[current].push(data[j][current])
      
    
  
  return output;

这个函数应该输出类似 mft: ['word1', 'word2' ...], pn: ['word1', 'word2' ...] ...

【讨论】:

以上是关于在 jQuery 或 vanilla JavaScript 中过滤 JSON 数据的主要内容,如果未能解决你的问题,请参考以下文章

jquery 或 vanilla javascript 自动加载(jquery 加载)页面中的所有链接内容

当弹出窗口关闭时,我将如何引发事件(jQuery 或 vanilla Javascript)?

没有 jquery 的 Django CSRF 丢失或不正确的 Ajax POST (Vanilla JavaScript)

vanilla javascript图像缩放滚动效果

jQuery UI Dialog 小部件是不是有 Vanilla JS 替代品[关闭]

javascript JQuery到Vanilla js指南