我有一个 json 文件，其中包含我想使用 jquery 函数将其移至特定 html id 的歌曲列表。这是我的 json 文件中五首歌曲中的 2 首(全部遵循相同的格式:
{
"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);
})
});
}
任何帮助都会非常感谢!
最佳答案
因此，您正在拉入一个包含歌曲列表和详细信息的 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"]
}];
因此，如果您的数据看起来像这样，那么该解决方案应该有效。如果没有，则控制台记录它并发布您得到的内容，我将进行调整。
关于javascript - 将 JSON 转换为 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39967354/