How can I display embedded arrays in JSON using $.each?

Question

I have a JSON file (https://github.com/conde-nast-international/cnid-tech-tests/blob/master/data/article.json) that has five array fields for an article: id, title, body, cover image, and url. But the body array has three embedded array objects (plaintext, pull_quote, and h2) that are not showing up.

I have no idea how to tackle this.

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>

Whole page view:

Section with embedded array objects that wont display:

@jmargolisvt do you have anymore detail to that answer? I would really appreciate a code example — T.Doe
– T.Doe, Commented Aug 10, 2017 at 17:30
It looks parsed already, its just that body is an array of objects and not a string. — James
– James, Commented Aug 10, 2017 at 17:33

James · Accepted Answer · 2017-08-10 17:37:14Z

2

Since value.body is an array of objects, you will have to iterate through it and display some properties of each object.

  $.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>';
  });

answered Aug 10, 2017 at 17:37

James

22.4k5 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

T.Doe Over a year ago

This is amazing! Thank you! I'm taking your suggestion to add styles according to the if else statement and I'm using the following: plaintext.style.color = red; but it doesn't seem to be working. Do you know what's wrong here?

James Over a year ago

plaintext isn't a dom element so it doesn't have a style property. You're concatenating the content into a string, so I would say add something like article_data += "" + el.body + "";

T.Doe Over a year ago

I tried that but that didn't work. I currently have if (el.type == 'plaintext') { article_data += ""; } but the only thing taking effect is the display:block;

James Over a year ago

You have to put the content inside the span

T.Doe Over a year ago

if (el.type == 'plaintext') { article_data += ""; } doesn't seem to be working either unfortunately

|

Collectives™ on Stack Overflow

How can I display embedded arrays in JSON using $.each?

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related