如何在 JavaScript 中过滤 JSON 对象？答案

【问题标题】：How can I filter a JSON object in JavaScript?如何在 JavaScript 中过滤 JSON 对象？
【发布时间】：2017-01-25 13:04:17
【问题描述】：

我有以下 JSON 字符串：

{
   "Alarm":{
      "Hello":48,
      "World":3,
      "Orange":1
   },
   "Rapid":{
      "Total":746084,
      "Fake":20970,
      "Cancel":9985,
      "Word": 2343
   },
   "Flow":{
      "Support":746084,
      "About":0,
      "Learn":0
   }
}

然后我加载上面的字符串并将其转换为json对象：

jsonStr = '{"Alarm":{"Hello":48,"World":3,"Orange":1},"Rapid":{"Total":746084,"Fake":20970,"Cancel":9985},"Flow":{"Support":746084,"About":0,"Learn":0}}';
var jsonObj = JSON.parse(jsonStr);

现在，如何通过键名过滤这个 json 对象？

例如，如果过滤器是“ange”，则过滤后的对象将是：

{
   "Alarm":{
      "Orange":1
   }
}

如果过滤器是“flo”，过滤后的对象会变成：

{
   "Flow":{
      "Support":746084,
      "About":0,
      "Learn":0
   }
}

如果过滤器是“wor”，结果将是：

{
   "Alarm":{
      "World": 3,
   },
   "Rapid":{
      "Word": 2343
   }
}

是否可以使用filter方法实现这种过滤？

【问题讨论】：

Filtering JSON data的可能重复
没有“JSON 对象”这样的东西——JSON总是是一个字符串；仅此而已。
@naomik 你的意思是JSON.parse(jsonStr)返回一个字符串？
@Meysam，没有。 JSON.stringify(data) 返回一个字符串。 JSON.parse(json) 返回解析后的数据。将 JSON 视为“JSON-formatted 字符串中的 JavaScript 数据”。当您说“JSON 对象”时，您很可能是指“JavaScript 对象”
@naomik From documentation：用 JSON.parse() 解析数据，数据变成 JavaScript 对象。

标签： javascript jquery json filter

【解决方案1】：

除了给定的解决方案之外，您还可以使用递归样式来检查键。

此提议提供了在内部包含更多嵌套对象并仅获取过滤部分的机会。

function filterBy(val) {
    function iter(o, r) {
        return Object.keys(o).reduce(function (b, k) {
            var temp = {};
            if (k.toLowerCase().indexOf(val.toLowerCase()) !== -1) {
                r[k] = o[k];
                return true;
            }
            if (o[k] !== null && typeof o[k] === 'object' && iter(o[k], temp)) {
                r[k] = temp;
                return true;
            }
            return b;
        }, false);
    }

    var result = {};
    iter(obj, result);
    return result;
}

var obj = { Alarm: { Hello: 48, "World": 3, Orange: 1 }, Rapid: { Total: 746084, Fake: 20970, Cancel: 9985, Word: 2343 }, Flow: { Support: 746084, About: 0, Learn: 0 }, test: { test1: { test2: { world: 42 } } } };

console.log(filterBy('ange'));
console.log(filterBy('flo'));
console.log(filterBy('wor'));

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

【解决方案2】：

您可以使用reduce() 和Object.keys() 创建一个函数，该函数将使用indexOf() 检查键名并返回所需的结果。

var obj = {
  "Alarm": {
    "Hello": 48,
    "World": 3,
    "Orange": 1
  },
  "Rapid": {
    "Total": 746084,
    "Fake": 20970,
    "Cancel": 9985,
    "Word": 2343
  },
  "Flow": {
    "Support": 746084,
    "About": 0,
    "Learn": 0
  }
}

function filterBy(val) {
  var result = Object.keys(obj).reduce(function(r, e) {
    if (e.toLowerCase().indexOf(val) != -1) {
      r[e] = obj[e];
    } else {
      Object.keys(obj[e]).forEach(function(k) {
        if (k.toLowerCase().indexOf(val) != -1) {
          var object = {}
          object[k] = obj[e][k];
          r[e] = object;
        }
      })
    }
    return r;
  }, {})
  return result;
}

console.log(filterBy('ange'))
console.log(filterBy('flo'))
console.log(filterBy('wor'))

【讨论】：

您好，您的代码中有一个错误，我无法修复。你能看一下吗？ jsfiddle.net/1tmwkkza/2 示例代码中搜索is，只返回IsHello，忽略IsWorld。

【解决方案3】：

对于filter 方法，我认为您的意思是Array#filter 函数。这不适用于对象。

无论如何，输入数据的解决方案可能如下所示：

function filterObjects(objects, filter) {
    filter = filter.toLowerCase();
    var filtered = {};
    var keys = Object.keys(objects);
    for (var i = 0; i < keys.length; i++) {
        var key = keys[i];
        if (objects.hasOwnProperty(key) === true) {
            var object = objects[key];
            var objectAsString = JSON.stringify(object).toLowerCase();
            if (key.toLowerCase().indexOf(filter) > -1 || objectAsString.indexOf(filter) > -1) {
                filtered[key] = object;
            }
        }
    }
    return filtered;
}

【讨论】：

你可以跳过if (objects.hasOwnProperty(key) === true)中的=== true。