Question

我有一个json文件，其中包含我想要使用jquery函数移动到特定html ID的歌曲列表。这是我的json文件中的五首歌曲中的两首（都遵循相同的格式：

{
    "songs": [
        {
            "title": "Hotel California",
            "artist": "Eagles",
            "album": "Hotel California",
            "album_cover": "https://en.wikipedia.org/wiki/Hotel_California_(Eagles_album)#/media/File:Hotelcalifornia.jpg",
            "release_date": "1976",
            "site": "http://www.allmusic.com/album/hotel_california",
            "generes": "Rock"
        },
        {
            "title": "Back in Black",
            "artist": "ACDC",
            "album": "Back in Black",
            "album_cover": "http://www.billboard.com/files/styles/review_main_image/public/media/acdc-back-in-black-album-cover-650.jpg",
            "release_date": "1980",
            "site": "http://www.allmusic.com/album/back_in_black",
            "generes": "Rock"
        }
    ]
}

这是我的html，我试图将我的数据加载到：

<!doctype html>
<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <title>Json</title>
</head>
<body>
  <a id="site" href="#">
    <img id="coverart" src="noalbum.png" />
  </a>
  <h1 id="title"></h1>
  <h2 id="artist"></h2>
  <h2 id="album"></h2>
  <p id="date"></p>
  <ul id="genres">
  </ul>
</body>
<script src="my.js"></script>  
</html>

我正在尝试创建一个用适当的数据填充这些标签的函数，并重复该过程，直到所有的歌曲都被重复为上述html格式。到目前为止，这是我的js文件：

$("a").click(function() {
  GetIndexData()
});

function GetIndexData() {
  var param = "&nocache=" + Math.random() * 1000000;
  $.getJSON('my.js', param, function(data) {
    $.each(data, function(key, val) {
      $('#' + key).html(val);
    })
  });
}

任何帮助都会非常感谢你！

Answer 1

所以你要输入一个包含歌曲列表和详细信息的JSON文件。我根据你提供的鳕鱼片来想出这个。

您必须感谢将使用您的数据填充的HTML模板。在这样做时，你将不得不使用类而不是id。我通过forEach循环运行了一系列歌曲来填充所有内容。

我也将你的基因改成了一个阵列;如果是这样的话。如果不是，我也有一个版本将其呈现为单个值。

    function render(data) {
        data.forEach(function(item) {
            var templ = $('<div class="album-wrap"> <a class="site" href="' + item.site + '"><img class="coverart" src="' + item.album_cover + '"/></a><h1 class="title">' + item.title + '</h1><h2 class="artist">' + item.artist + '</h2><h2 class="album">' + item.album + '</h2><p class="date">' + item.release_date + '</p><ul class="genres"></ul></div>'),
                generesLi = templ.find('.genres');

            generesRender(item.generes, generesLi);

            $('body').append(templ);
        });
    }

    function generesRender(arr, elem) {
        arr.forEach(function(item) {
            elem.append('<li>' + item + '</li>');
        });
    }
    render(data);

这就是如果generes不是数组。

 function render(data) {
            data.forEach(function(item) {
                var templ = $('<div class="album-wrap"> <a class="site" href="' + item.site + '"><img class="coverart" src="' + item.album_cover + '"/></a><h1 class="title">' + item.title + '</h1><h2 class="artist">' + item.artist + '</h2><h2 class="album">' + item.album + '</h2><p class="date">' + item.release_date + '</p><p class="genres">' + item.generes + '</p></div>');
                $('body').append(templ);
            });
        }

您的getJSON电话也已关闭。我不接受一个参数（我知道），你不需要它。所以它应该是这样的。

$.getJSON('my.js', function(data) {
    render(data);
});

我使用了页面上的JSON。我看起来像这样。

var data = [{
            "title": "Hotel California",
            "artist": "Eagles",
            "album": "Hotel California",
            "album_cover": "https://en.wikipedia.org/wiki/Hotel_California_(Eagles_album)#/media/File:Hotelcalifornia.jpg",
            "release_date": "1976",
            "site": "http://www.allmusic.com/album/hotel_california",
            "generes": ["Rock", "Country", "Electric"]
        }, {
            "title": "Back in Black",
            "artist": "ACDC",
            "album": "Back in Black",
            "album_cover": "http://www.billboard.com/files/styles/review_main_image/public/media/acdc-back-in-black-album-cover-650.jpg",
            "release_date": "1980",
            "site": "http://www.allmusic.com/album/back_in_black",
            "generes": ["Rock", "Jazz"]
        }];

因此，如果您的数据看起来像这样，那么解决方案应该可行。如果它没有，那么控制台记录它并发布你得到的，我会做出调整。

将JSON转换为HTML

1 个答案: