如何使用$ .each在JSON中显示嵌入式数组?

T.做

我有一个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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何阻止电子邮件中的嵌入式图像通过GMail以附件形式显示?

使用嵌入式数组解析JSON字节流时发生运行时错误

Java中的Graal嵌入式javascript,如何从Java调用列表/数组上的map?可能吗?

mallinfo在嵌入式系统中的使用

如何在Objective-C中处理用于JSON格式的嵌入式数组

如何在C ++中嵌入Chromium嵌入式框架

如何在数组中的嵌入式文档中指定/投影字段?

如何从嵌入式资源C#中读取.JSON

如何使用id mongodb在嵌入式文档数组中查找数据?

如何使用iText检查PDF中的嵌入式字体

在MongoDB聚合管道中,如何投影匹配的嵌入式数组的索引?

如何在MongoDB中的嵌入式数组对象中插入json对象?

使用JavaScript在HTML选择的嵌入式DIV中显示DIV

如何在R Shiny应用程序中显示嵌入式推文?

如何识别数字数组中的嵌入式回文

如何在嵌入式数组mongodb中查询嵌入式文档

如何访问Pandas DataFrame中的嵌入式json对象?

使用Java在MongoDB中的嵌入式文档中索引和搜索“数组”

如何使用嵌入式jar文件中可用的功能?

如何使用Mongoose将值推入MongoDB中嵌入式文档中的数组?

如何在MongoDB中查询数组中的单个嵌入式文档?

与数组比较,如何在mongodb中检索部分嵌入式文档?

如何查询Mongodb的嵌入式数组

如何从MONGO文档中的嵌入式数组中选取多个元素

如何在MongoDB的数组字段中查询和删除嵌入式对象?

使用Angular时如何在嵌入式页面容器中显示Auth0锁定?

在MongoDB中搜索嵌入式数组(使用Java)

使用 jQuery .each 在嵌入式数组上使用 find()

如何使用typeorm排除Postgres嵌入式数组中的所有匹配项?