Separate Nested Arrays in JSON Objects with Jquery

Question

I'm trying to do a simple exercise but I think I'm over thinking it. I getting values from a 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": []
    }
]

}

and putting them in a html like so:

$(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>");
    });
});

});

How can I separate the genres in different html blocks (like each one in a p tag)? I tried to run another loop in the first each function but it was printing the block twice, not separating the genres.

Any help will be welcome, thank you!

Rory McCrossan · Accepted Answer · 2018-02-24 20:39:09Z

1

The issue is because genres is an array which holds a single comma delimited string which you need to first split() before you can iterate over it in another loop over within your current each() that iterates over data.films.

You would need to make to your logic to build your HTML in a separate string before calling append(). Something like this:

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>

Note that you could make the split() logic redundant, and the JSON response better structured, if you returned genre as an actual array instead of a single comma delimited string in an array, which is rather pointless.

In other words, return this:

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

Instead of this:

"genre": ["action,horror"]

answered Feb 24, 2018 at 20:39

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

2 Comments

jmarc Over a year ago

I see. Would the logic be different if genre would like this: "genre": ["action", "comedy"] ?

Rory McCrossan Over a year ago

Yes, in that case it's just film.genre.forEach(...

Collectives™ on Stack Overflow

Separate Nested Arrays in JSON Objects with Jquery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related