使用 Jquery 从 JSON 数组中检索值答案

【问题标题】：retrieve values from JSON array using Jquery使用 Jquery 从 JSON 数组中检索值
【发布时间】：2014-05-28 16:14:06
【问题描述】：

如果名称等于Test，是否可以打印Can、Bottle和Fountain

有人可以帮忙在 if 块中添加一个条件以匹配条件吗？？

$.each(value, function (i, v) {
if(i.name=="Test")
{

}
});

从下面的JSON格式

[
    {
        "id": "0004",
        "name": "Test",
        "image": {
            "url": "images/0001.jpg",
            "width": 200,
            "height": 200
        },
        "Can": [
            "250ml",
            "300ml",
            "330ml",
            {
                "image": "images/0001.jpg"
            }
        ],
        "Bottle": [
            "350ml",
            "600ml",
            {
                "image": "images/0001.jpg"
            }
        ],
        "Fountain": [
            "small",
            "large",
            {
                "image": "images/0001.jpg"
            }
        ]
    }
]

【问题讨论】：

这个 json 结构似乎关闭了。首先是 id 和 name 作为键，然后是“Can”、“Bottle”、“Fountain”作为键？我们在这里缺少什么？
看到这个问题stackoverflow.com/questions/10221229/…

标签： jquery

【解决方案1】：

为了简单直接回答问题，这里有一个简单的例子，jsFiddle。

// jquery Example
$(json).each(function() {
  if (this.name === "Test"){
    console.log(this.Can);
    console.log(this.Bottle);
    console.log(this.Fountain);
    $("#jQuery").append(JSON.stringify(this.Can)+"<br>");
    $("#jQuery").append(JSON.stringify(this.Bottle)+"<br>");
    $("#jQuery").append(JSON.stringify(this.Fountain)+"<br>");
  };
});

// pure JS example
for (i = 0; i < json.length; i++ ) {
  if (json[i].name === "Test"){
    console.log(json[i].Can);
    console.log(json[i].Bottle);
    console.log(json[i].Fountain);
    var out = document.getElementById("nojQueryResults");
    out.innerHTML = out.innerHTML + JSON.stringify(json[i].Can)+"<br>";
    out.innerHTML = out.innerHTML + JSON.stringify(json[i].Bottle)+"<br>";
    out.innerHTML = out.innerHTML + JSON.stringify(json[i].Fountain)+"<br>";
  };
};

// jquery Example iterate over all nodes when found
// json should be refactored to make an array in the found object 
// that contains only what you want to extract here. Say maybe a type: key
// otherwise you'll get everything in this /flat/ node
$(json).each(function() {
  if (this.name === "Test"){
    $(this).each(function() {
      console.log(this);
      $("#IterateAllChildNodes").append(JSON.stringify(this)+"<br>");
    })
  }
});



// pure JS example iterate over all nodes when found
// json should be refactored to make an array in the found object 
// that contains only what you want to extract here. Say maybe a type: key.
// otherwise you'll get everything in this /flat/ node
for (i = 0; i < json.length; i++ ) {
  if (json[i].name === "Test"){
    console.log(json[i]);
    var out = document.getElementById("NoJqueryIterateAllChildNodes");
    out.innerHTML = out.innerHTML + JSON.stringify(json[i])+"<br>";
  };
};

编辑我用更多的例子扩展了 jsFiddle。纯 JS 和另外 2 个迭代找到的节点中的所有节点，正如在 cmets 中提到的那样，这些可能不是您要寻找的唯一三个项目。您的 json 没有形成到特定“类型”在它们自己的节点中的位置，因此除非您提供额外的排除逻辑，否则您将在 /found/ 节点中获得所有内容，如果有额外的排除逻辑，您必须稍后更新键/值已添加到您不想输出的此节点。考虑添加一个 type 并将 Can/Bottle/Fountain 放入其中进行迭代。

【讨论】：

您的答案假设 Can、Bottle 和 Fountain 在开发时是已知的，但如果在开发时不知道并且仅在执行期间知道怎么办。 Javascript 内省是这里的关键。
嗯，这个问题是具体的，但你是对的，它可以被理解为打印“测试”下的所有元素。在这种情况下，只需在索引 0 中循环。当然，这个兔子洞可能会更深（例如：但是如果他们想打印特定节点下方的节点，或者递归地打印所有节点等等）......在这种情况下OP应该详细说明。我将更新我的答案以提供更通用的示例。（编辑：只需重新阅读我的评论，我也做了一个纯 js 示例，它使用索引。jQuery 会做一个。）.. 回答更新挂起
更新 jsFiddle 后，我意识到“类型”不是子节点，因此如果迭代，他可能会得到比他想要的更多的东西。虽然，也许他想要来自该节点的所有数据。但由于他特别提到了罐头/瓶子/喷泉，我认为这就是他所追求的。无论哪种方式，我都为所有人提供了示例。 /耸肩/。我也显然假设OP是他。 :)

【解决方案2】：

您的 JSON 结构也是一个 javascript 对象。您的对象有 6 个属性：“id”、“name”、“image”、“Can”、“Bottle”、“Fountain”。

您需要的是使用 javascript 内省并循环遍历对象的属性，请参阅以下 stackoverflow 问题：

How to do JavaScript object introspection?

$(json).each(function() {
  if (this.name === "Test"){
    for(var propName in this) {
      if(typeof(obj[propName]) != "undefined") {
         console.log(propName);
      }
    }
  }
});

【讨论】：