javascript - 使用 JQuery 迭代 JSON

Question

我想从外部源检索的一些 json 数据中获取颜色名称和十六进制值。我创建了一个 jsfiddle 来解决它，但我正在做一些根本错误的事情，因为我什至没有得到警报('hi');理想情况下，我想要一个带有十六进制值的三种颜色名称的列表:例如。

• 亮黑色 - #000000
• 冰银金属色 - #C3C3C3
• 水肺蓝色金属色 - #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>