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

Solution 1

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(', ')
);

Solution 2

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 );
});

Solution 3

You can access array values by using a for-in loop like this:

var result = "";

for (i in genres.name) {
  result += genres.name[i];
} 

console.log(result);