从数组中的数组项中获取json项
Get json items from array item inside array
我有一个数组的数组:
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
属性的数组。专辑中的数组被称为tracks
,它保存了显示在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);
}
});
}
这将像这样在DOM中插入div和ul:
<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>
然而,当我试图在<ul>
中插入tracks
时,我在控制台中得到这个错误:
Uncaught TypeError: Cannot read property 'albums of undefined
您应该重写您的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);
}
然后,把它和你的jsonDo
:
function jsonDo(data) {
$.each(data.music.albums, function (index, value) {
alert(value.name);
if (typeof data.music.albums !== 'undefined') {
createAlbumSection(value.name, value.tracks);
}
});
}
代替
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 createAlbumSection(id) {
gridListMusic.append('<div>' + id + '</div>');
gridListMusic.append('<div class="grid-container">' + '<ul>' + '</ul>' + '</div');
$.each(json.music.albums[0].tracks, function (index, value) {
gridListMusicList.append('<li>' + value.name + '</li>');
});
}
相关文章:
- 为DataTables aoColumnDefs创建JavaScript数组(JSON格式)
- 使用 Javascript 将行添加到数组 json
- PHP数组JSON编码和该对象在ExtJs中解码
- 数组json转换为数组json
- 将Blob文本转换为Javascript中的数组/JSON对象
- 如何合并这些数组/json 对象
- 尝试从数组 JSON 键中删除引号
- JavaScript 中的数组 JSON
- 在数组 JSON 格式的 JavaScript 变量末尾添加新地址
- 如何访问这个Javascript数组(JSON对象?)
- rails传递记录数组(JSON)
- 按值提取对象/数组json vs数组
- 获取具有子数组json值的数组的值
- Object对象数组Json.字符串数组的字符串化
- 如何在Ext js 4.1中过滤数组json
- PHP -多维数组Json
- 正在分析数组Json以选择Tag
- 试图将字符串数据转换为数值数据,将数据放入数组的数组(Json)
- 从数组json、javascript中的specf值中删除引号
- 使用JavaScript或jQuery读取数组JSON