Javascript 从json数据子级读取并插入为<；李>；

我有一个简单的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

，但我不确定从那一点上该怎么做。

首先，我认为您应该更正JSON结构，例如

foobar

应该是数组而不是对象：

然后，您只需循环遍历该数组，并使用迭代的

track

对象值创建元素：

var str='{“音乐”：{“唱片”：{“foobar”：[{“曲目”：{“名称”：“foo”，“ref”：“1”}，{“曲目”：{“名称”：“bar”，“ref”：“2”}}}}}}；
var json=json.parse（str）；
console.dir（json）；
var array=json.music.albums.foobar；
console.dir（数组）；
var myUL=document.getElementById（“myUL”）；
对于（var i=0；i

---

首先，我们需要修复JSON。我们将使用“轨迹”并使其成为一个对象数组，而不是使用Tack。 下面是更新后的JSON

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

可以使用$.each或for循环遍历数组并构造lis。 HTML：我们有一个ID为“some ul”的ul。我们需要一个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

var templi=''；
$.each（jsonData.music.albums.foobar.tracks，函数（索引，值）{//循环遍历曲目数组
//在这里构建lis
templi+='
'+value.name+'
'；//因为我们只需要曲目名称，所以使用value.name
});
$（'#some ul'）.html（templi）//最后将lis添加到我们的ul中

---

这就是您使用的JSON吗？看起来不对。例如，我希望

foobar

对象包含一个轨迹数组。现在，

foobar

是一个具有两个属性的对象，都称为

track

，因此解析器将忽略第一个

track

。您正在创建该结构吗

foobar

应该是数组您没有正确的json输出。应该有一个foobar数组修复了语法，现在有一个数组而不是两个都称为“track”的属性。json是一个单独的文件，我使用jquery的

$.getJSON

来获取数据。在这种情况下，你必须编辑你的JSO文件，然后你可以像我的回答一样继续。好的，我会试试看，如果可行的话，我会接受答案。谢谢：）它工作了，但是我使用了上面的解决方案，因为它使用的代码更少，而且对我来说更容易理解。无论如何，谢谢你，你帮了我很大的忙。这是一个很好的答案，但是这似乎不适用于我的代码，它用以下代码记录“无法读取未定义的属性'albums'”：

var json=$.getJSON（“/js/content.json”）；var templi=“”；$。每个（json.music.albums.foobar.tracks、函数（索引、值）{templi+='
'+value.name+'
'；}）$（“#新发行版”）.html（templi）我稍微修改了一下代码，现在它可以工作了！非常感谢。我把它改为：
var json=$.getJSON（“/js/content.json”，jsonDo）；函数jsonDo（data）{var templi=''；$.each（data.music.albums，函数（index，value）{if（typeof data.music.albums！='undefined'）{createalbumssection（value.albums）；}}；$（'#newreleases'）.html（templi）；}
现在唯一的问题是返回未定义的
value.albums
,，这很奇怪，因为它不适合轨道。