CODEWITHSUNDEEP
javascriptarraysjsonjquery
RaveN
RaveN

Reputation: 115

Output Json Arrays with Javascript

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

Upvotes: 6

Views: 37317

Answers (4)

TheLastCodeBender
TheLastCodeBender

Reputation: 558

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

Upvotes: 1

Rogerio de Moraes
Rogerio de Moraes

Reputation: 1577

You can use

<script>
   results = '{ "genres": [{ "id": 28, "name": "Action" },{ "id": 18, "name": "Drama" },{ "id": 14, "name": "Fantasy" },{ "id": 36, "name": "History" }] }';    
   results = JSON.parse(results);

       for($i in results.genres){
            console.log(results.genres[$i].name);
       }

</script>

JSON.parse method parses a string as JSON, optionally transforming the value produced by parsing and you can get value from node like array. When you use for($i in results.genres) you dont net set limite size, 'case for get all array/object elements.

Group Elements need are between { "genres": [{ ...}] } for your JSON'll be read.

Upvotes: 0

Eric
Eric

Reputation: 97565

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

Upvotes: 5

kapa
kapa

Reputation: 78671

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

Upvotes: 8

Related Questions