如何使用$ .each以JSON格式显示嵌入式数组？

Question

我有一个JSON文件（https://github.com/conde-nast-international/cnid-tech-tests/blob/master/data/article.json），它有一个文章的五个数组字段：id，title，body，cover image和url。但是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>

整页视图：

包含不显示的嵌入数组对象的部分：

Answer 1

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