Output Json Arrays with Javascript

Question

I am really new to Javascript and Json and need help with the following. This is some json data:

"genres": [

 {
    "id": 28,
    "name": "Action"
 },
 {
    "id": 18,
    "name": "Drama"
 },
 {
    "id": 14,
    "name": "Fantasy"
 },
 {
    "id": 36,
    "name": "History"
 }

],

Now I would like to output all names of genres

I'm working with jquery mobile and ajax to retrieve json data. Inside my function it looks sth like this:

var genres = results.genres[0].name;
$('#tmdbInfo2').html('<br>Genres: ' +genres);

In this example the first element of genres will we shown (Action), but not all. The output should be: Action, Drama, Fantasy, History. Sometimes the number of elements of genres varies..

Please help me, its very confusing for me O_o

Answer 1

Plain Javascript

This is how you iterate on the elements of an array, using a for loop (do not use a for...in loop on arrays, if you ever get tempted).

for (var i = 0; i < results.genres.length; i++) {
    console.log( results.genres[i].name );
}

Your array is called results.genres here. Inside the loop, results.genres[i] will always refer to the current element.

jQuery

I see that you are using jQuery, so you can also use $.each() like this:

$.each(results.genres, function (currentIndex, currentElem) {
    console.log( currentElem.name );
});

Answer 2

Another way to iterate:

results.genres.forEach(function(genre) {
    console.log(genre.name);
});

For what you're trying to do:

$('#tmdbInfo2').html(
    'Genres: ' + results.genres.map(function(genre) {
        return genre.name;
    }).join(', ')
);