Question

我有这个简单的json：

{
    "music": {
        "albums": {
            "foobar": {
                "track": [
                    {"name":"foo","ref":"1"},
                    {"name":"bar","ref":"2"}
                ]
            }
        }
    }
}

我希望从foobar获取数据并将其插入无序列表动态，如下所示：

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

我是json的新手，但我得到了它的基础知识，我将如何继续这样做？

我会使用jquery $.getJSON，但我不确定从那时起该做什么。

Answer 1

首先，我认为你应该更正你的JSON结构，例如foobar应该是一个数组而不是一个对象：

然后你只需要遍历这个数组并使用迭代的track对象的值创建元素：

var str = '{"music": {"albums": {"foobar": [{"track": {"name": "foo","ref": "1"}},{"track": {"name": "bar","ref": "2"}}]}}}';

var json = JSON.parse(str);
console.dir(json);
var array = json.music.albums.foobar;
console.dir(array);
var myUL = document.getElementById("myUL");
for (var i = 0; i < array.length; i++) {
  var li = document.createElement("li");
  li.value = array[i].track.ref;
  li.innerText = array[i].track.name;
  myUL.appendChild(li);
}

<ul id="myUL"></ul>

注意：

我编辑了JSON的结构，将foobar用作array，将每个track用作object。

Answer 2

首先我们需要修复我们的JSON。我们将使用＆＃39; Tracks＆＃39;而不是使用Tack。并使其成为一个对象数组。所以这是更新的JSON。

{
"music": {
    "albums": {
        "foobar": {
            "tracks": [
                {
                    "name": "bar1",
                    "ref": "1"
                },
                {
                    "name": "bar2",
                    "ref": "2"
                },
                {
                    "name": "bar3",
                    "ref": "3"
                }
            ]
        }
    }
}
}

您可以使用$ .each或for循环遍历数组并构造lis。 HTML：我们有一个带ID的ul＆＃39; some-ul＆＃39;。我们需要一个ID，以便在获得曲目名称后添加lis。

jQuery：

var templi = '';
$.each(jsonData.music.albums.foobar.tracks, function(index, value){//loop through track array
  //construct lis here
  templi += '<li>'+value.name+'</li>';//since we just need the track name we use value.name
});
$('#some-ul').html(templi);//in the end add the lis to our ul

jsfiddle
jQuery.each()
Use this to validate your JSON

从json data child读取并插入<li>

2 个答案: