Question

我有以下示例JSON

var data = {
  "menu": [
    {
      "name": "Event A",
      "sub": [{
          "name": "Sub Event A 1",
          "sub": null
        },
        {
          "name": "Sub Event A 2",
          "sub": [{
              "name": "Sub Sub Event A 2",
              "sub": null
            }]
        }
      ]
    },
    {
      "name": "Event B",
      "sub": [{
          "name": "Sub Event B 1",
          "sub": null
        },
        {
          "name": "Sub Event B 2",
          "sub": [{
              "name": "Sub Sub Event B 2",
              "sub": null
            }]
        }
      ]
    }
  ]
}

当我创建菜单时，我可以轻松选择是使用Event A还是Event B作为来源，如下所示：

$(data.menu[0].sub).each(function(){ /* menu[0] therefore first, Event A */
    $menu1.append(
      getMenuItem1(this)
    );
});

问题

是否可以通过name字段的值来选择它？

类似于：$(data.menu[name="Event A"].sub)

Answer 1

是否可以通过name字段的值来选择它？

是的，使用Array#find（如果您只想要第一个）或Array#filter（如果您想要所有匹配的那个）。

Array#find（ES2015 +，但可以填充）：

var firstMatchingItem = data.menu.find(function(entry) {
    return entry.name == "Event A";
});

Array#filter（ES5 +，但可以整理）：

var matchingItems = data.menu.filter(function(entry) {
    return entry.name == "Event A";
});

使用ES2015的箭头功能，它们看起来都更简单：

var firstMatchingItem = data.menu.find(entry => entry.name == "Event A");

var matchingItems = data.menu.filter(entry => entry.name == "Event A");

Answer 2

你必须迭代并找到你想要的菜单：

for (var i = 0; i < data.menu.length; i++) {
    if (data.menu[i].name == "Event A") {
        var menu = data.menu[i];
        //do stuff!
    }
}

Answer 3

您可以使用lodash或类似内容。它非常易于使用。使用lodash filter：

_.filter(data, { name: "Event A" });

在你的情况下：

$(_.filter(data, { name: "Event A" })[0].sub)

按名称访问JSON子级别

3 个答案: