我有一个JSON文件(https://github.com/conde-nast-international/cnid-tech-tests/blob/master/data/article.json),其中有五个用于文章的数组字段:id,title,body ,封面图片和网址。但是主体数组具有三个未显示的嵌入式数组对象(纯文本,pull_quote和h2)。
我不知道该如何解决。
HTML:
<div id="container">
<table id="article_table" class="table table-bordered ">
<tr>
<th>ID</th>
<th>Title</th>
<th>Body</th>
<th>Cover Image</th>
<th>Url</th>
</tr>
</table>
</div>
JavaScript:
<script>
$(document).ready(function() {
$.getJSON("article.json", function(data){
console.log(data) //just to log in console as well
var article_data = '';
$.each(data, function(key, value){
article_data += '<tr>';
article_data += '<td>'+value.id+'</td>';
article_data += '<td>'+value.title+'</td>';
article_data += '<td>'+value.body+'</td>';
article_data += '<td>'+value.cover+'</td>';
article_data += '<td>'+value.url+'</td>';
article_data += '</tr>';
});
$('#article_table').append(article_data);
});
});
</script>
整页浏览:
带有嵌入式数组对象的部分将不会显示:
由于value.body是对象的数组,因此您将不得不遍历它并显示每个对象的某些属性。
$.each(parsedData, function(key, value){
article_data += '<tr>';
article_data += '<td>'+value.id+'</td>';
article_data += '<td>'+value.title+'</td>';
article_data += '<td>';
$.each(value.body, function (index, el) {
if (el.type == 'plaintext') {
// do something special if it's plaintext (?)
} else if (el.type == 'h2') {
// put the content in an h2 (?)
}
// just display the content
article_data += el.body;
});
article_data += '</td>';
article_data += '<td>'+value.cover+'</td>';
article_data += '<td>'+value.url+'</td>';
article_data += '</tr>';
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句