Javascript 从数组中的数组项获取json项
我有一个数组:Javascript 从数组中的数组项获取json项,javascript,jquery,arrays,dom,Javascript,Jquery,Arrays,Dom,我有一个数组: var json = { "music": { "albums": [{ "name": "foo", "tracks": [{ "name": "foo", "ref": "1" }, { "name": "bar", "ref":
var json = {
"music": {
"albums": [{
"name": "foo",
"tracks": [{
"name": "foo",
"ref": "1"
}, {
"name": "bar",
"ref": "2"
}, {
"name": "foobar",
"ref": "3"
}]
}, {
"name": "bar",
"tracks": [{
"name": "f",
"ref": "1"
}, {
"name": "oo",
"ref": "2"
}, {
"name": "bar",
"ref": "3"
}]
}]
}
};
如您所见,album
是一个包含两个数组和一个name
属性的数组。相册中的数组称为曲目
,用于保存dom上显示的相册中的曲目。
我尝试使用jquery修改dom,如下所示:
var gridListMusic = $('#grid-listMusic');
var gridListMusicList = $('#grid-listMusic ul');
function createAlbumSection(id) {
gridListMusic.append('<div>' + id + '</div>');
gridListMusic.append('<div class="grid-container">' + '<ul>' + '</ul>' + '</div');
$.each(json.music.albums.tracks, function (index, value) {
gridListMusicList.append('<li>' + value.name + '</li>');
});
}
function jsonDo(data) {
$.each(data.music.albums, function (index, value) {
alert(value.name);
if (typeof data.music.albums !== 'undefined') {
createAlbumSection(value.name);
}
});
}
<div>foo</div>
<div class="grid-container">
<ul>
<li>foo</li>
<li>bar</li>
<li>foobar</li>
</ul>
</div>
<div>bar</div>
<div class="grid-container">
<ul>
<li>f</li>
<li>oo</li>
<li>bar</li>
</ul>
</div>
var gridListMusic=$(“#grid listMusic”);
var gridListMusicList=$(“#grid listMusic ul”);
函数createAlbumSection(id){
gridListMusic.append(“”+id+“”);
gridListMusic.append('+''+'
'+'而不是
function createAlbumSection(id) {
gridListMusic.append('<div>' + id + '</div>');
gridListMusic.append('<div class="grid-container">' + '<ul>' + '</ul>' + '</div');
$.each(json.music.albums.tracks, function (index, value) {
gridListMusicList.append('<li>' + value.name + '</li>');
});
}
函数createAlbumSection(id){
gridListMusic.append(“”+id+“”);
gridListMusic.append(''+''+'
'+'您应该重写createAlbumSection
以接受曲目列表:
function createAlbumSection(id, tracks) {
var html = '<div>' + id + '</div>' + '<div class="grid-container">' + '<ul>';
$.each(tracks, function (index, value) {
html += '<li>' + value.name + '</li>';
});
html += '</ul>' + '</div>';
gridListMusic.append(html);
}
相册
是一个数组。它没有属性跟踪
。这不会在无序列表中插入。您是指.grid容器中的
?是的。它只插入
,而不是's@SebastianOlsen我已经编辑了我的答案,应该插入非常感谢
中的元素。我不知道这个问题是重复的,我在搜索中找不到它,但我也不知道嵌套是一个单词。非常感谢您的帮助!
function createAlbumSection(id, tracks) {
var html = '<div>' + id + '</div>' + '<div class="grid-container">' + '<ul>';
$.each(tracks, function (index, value) {
html += '<li>' + value.name + '</li>';
});
html += '</ul>' + '</div>';
gridListMusic.append(html);
}
function jsonDo(data) {
$.each(data.music.albums, function (index, value) {
alert(value.name);
if (typeof data.music.albums !== 'undefined') {
createAlbumSection(value.name, value.tracks);
}
});
}