使用 jquery 分隔 JSON 对象中的嵌套数组

Question

我正在尝试做一个简单的练习，但我认为我想多了。 我从 JSON 中获取值：

{
"films": [
{
"title": "Platoon",
"director": "Bob",
"synopsis": "<p>Lorem ipsum dolor sit amet</p>",
"genre": ["action"]
},
{
"title": "Alien",
"director": "Jack",
"synopsis":"<p>Lorem ipsum dolor sit amet</p>",
"genre": ["action,horror"]
},
{
"title": "Goonies",
"director": "Danielle",
"synopsis":"<p>Lorem ipsum dolor sit amet</p>",
"genre": ["action,comedy"]
},
{
"title": "Spiderman",
"director": "Sam",
"synopsis":"<p>Lorem ipsum dolor sit amet</p>",
"genre": []
}
]

}

并将它们放在 HTML 中，如下所示：

$(document).ready(function() {
$.getJSON("films.json").done(function(data) {
$.each(data.films, function(i) {
$('#films').append('<div class="film">' +
'<div class="message__title">' + data.films[i].title + '</div>' +
'<div class="message__director">' + data.films[i].director + '</div>' +
'<div class="message__synopsis">' + data.films[i].synopsis + '</div>' +
'<div class="message__genre">' + data.films[i].genre + '</div>' +
"</div>");
});
});

});

如何在不同的 html 块中分离流派(就像 p 标签中的每个流派)？我试图在每个函数的第一个中运行另一个循环，但它打印了两次块，而不是分离流派。

欢迎任何帮助，谢谢！

Answer 1

问题是因为genres是一个数组，其中包含一个逗号分隔的字符串，您需要先split()该字符串，然后才能在当前循环中迭代它each()遍历data.films。

在调用append()之前，您需要对逻辑进行逻辑以在单独的字符串中构建 HTML 。像这样：

var data = {
"films": [{
"title": "Platoon",
"director": "Bob",
"synopsis": "<p>Lorem ipsum dolor sit amet</p>",
"genre": ["action"]
},
{
"title": "Alien",
"director": "Jack",
"synopsis": "<p>Lorem ipsum dolor sit amet</p>",
"genre": ["action,horror"]
},
{
"title": "Goonies",
"director": "Danielle",
"synopsis": "<p>Lorem ipsum dolor sit amet</p>",
"genre": ["action,comedy"]
},
{
"title": "Spiderman",
"director": "Sam",
"synopsis": "<p>Lorem ipsum dolor sit amet</p>",
"genre": []
}
]
}
// in your $.ajax success:
var html = data.films.map(function(film) {
var filmBlock = '<div class="film">' +
'<div class="message__title">' + film.title + '</div>' +
'<div class="message__director">' + film.director + '</div>' +
'<div class="message__synopsis">' + film.synopsis + '</div>' +
'<div class="message__genre">';

(film.genre[0] || '').split(',').forEach(function(genre) {
filmBlock += '<p>' + genre + '</p>';
});
return filmBlock + '</div></div>';
}).join('');
$('#films').append(html);

.film { 
border: 1px solid #C00;
padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="films"></div>

请注意，如果您将genre作为实际数组而不是数组中的单个逗号分隔字符串返回，则可以使split()逻辑冗余，并使 JSON 响应结构更好，这是毫无意义的。

换句话说，返回以下内容：

"genre": ["action", "horror"]

取而代之的是：

"genre": ["action,horror"]