使用JQuery迭代JSON

Question

我想从我从外部源检索的一些json数据中获取颜色名称和十六进制值。我创造了一个jsfiddle来完成它，但我做了一些根本错误的事情，因为我甚至没有警觉（'hi'）; 理想情况下，我想要一个旁边带有十六进制值的三个颜色名称的列表： 例如

• Brilliant Black - ＃000000
• 冰银金属 - ＃C3C3C3
• Scuba Blue Metallic - ＃2E3F59

JSFiddle：https://jsfiddle.net/Thread7/vp01m13x/2/

HTML：

<ul id="groups">
<li>Test</li>
</ul>

使用Javascript：

jsonval = '[{"category":"Exterior","options":[{"id":"200421460","name":"Brilliant Black","colorChips":{"primary":{"hex":"000000"}}},{"id":"200421466","name":"Ice Silver Metallic","colorChips":{"primary":{"hex":"C3C3C3"}}},{"id":"200421462","name":"Scuba Blue Metallic","colorChips":{"primary":{"hex":"2E3F59"}}}]}]';
var cardata = JSON.parse(jsonval);
$.each(cardata.options, function(o, valo) {
  alert('hi');
  $('<li>' + valo + '</li>').appendTo($grouplist);
});

Answer 1

cardata.options不存在，因为cardata是包含单个元素的对象的数组。

然后在$.each内，valo将成为对象。您需要使用valo.id，valo.name等

$.each(cardata[0].options, function(o, valo) {
    console.log(valo.id);
});

以下是您演示的更新版本：

var jsonval = '[{"category":"Exterior","options":[{"id":"200421460","name":"Brilliant Black","colorChips":{"primary":{"hex":"000000"}}},{"id":"200421466","name":"Ice Silver Metallic","colorChips":{"primary":{"hex":"C3C3C3"}}},{"id":"200421462","name":"Scuba Blue Metallic","colorChips":{"primary":{"hex":"2E3F59"}}}]}]';

var $grouplist = $('#groups');

var cardata = JSON.parse(jsonval);
$.each(cardata[0].options, function(o, valo) {
  $('<li style="color:#' + valo.colorChips.primary.hex + ';">' + valo.name + '</li>').appendTo($grouplist);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="groups"></ul>

Answer 2

这只是你的JSON字符串的一个小问题。你把它包装在一个数组中。您正在尝试迭代cardata.options - 它不存在。

解决此问题的两种方法：

1. 删除外部数组（字符串外的[和]）
2. 迭代cardata[0].options

仍然没有表现，但......

所以它仍然没有在你的小提琴中工作。这是因为$grouplist的引用（至少在fiddle linked in the question中）不存在。

删除引用它的行，或者您可以在脚本顶部添加var $grouplist = $('ul');。

然后它会起作用：



供将来参考

您可以通过将该字符串弹出到任何流行的Web浏览器调试工具中来轻松测试JSON字符串：