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!

score 1 · Accepted Answer · answered Feb 24 '18 at 20:39

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"]

I see. Would the logic be different if genre would like this: "genre": ["action", "comedy"] ? — jmarc, Feb 24 '18 at 23:11

Separate Nested Arrays in JSON Objects with Jquery

1 Answers1