从数组内的数组项中获取json项答案

【问题标题】：Get json items from array item inside array从数组内的数组项中获取json项
【发布时间】：2015-07-18 20:48:33
【问题描述】：

我有一个数组数组：

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);
            }
        });
    }

这应该会像这样将 div 和 uls 插入到 DOM 中：

<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 时，我会在控制台中收到此错误：

未捕获的类型错误：无法读取未定义的属性“专辑”

【问题讨论】：

albums 是一个数组。它没有属性tracks。

标签： javascript jquery arrays dom

【解决方案1】：

您应该重写您的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);
        }
    });
}

【讨论】：

这不会在无序列表中插入<li>。
您的意思是<ul> 中的.grid-container？
是的。它只插入<ul>，而不是<li>的
@SebastianOlsen 我已经编辑了我的答案，它应该在<ul> 中插入<li> 元素。
非常感谢。我不知道这个问题是重复的，我在搜索中找不到它，但是我又不知道嵌套是一个词。非常感谢你帮助我！

【解决方案2】：

而不是

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>');
        });
    }

【讨论】：