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

I am sorry to say that, but you should have simply googled that. Or open up a basic tutorial on Javascript arrays. — kapa
– kapa, Commented Dec 1, 2012 at 10:33
I already did, believe me. I'm not a programmer. I found many examples, but couldn't transfer this to my problem. — RaveN
– RaveN, Commented Dec 1, 2012 at 10:35
Nobody is born as a programmer. If you want to do programming, well, you have no other chance but to learn it. — kapa
– kapa, Commented Dec 1, 2012 at 10:46

Community · Accepted Answer · 2020-06-20 09:12:55Z

8

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 1, 2012 at 10:36

kapa

78.9k21 gold badges166 silver badges178 bronze badges

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

2 Comments

RaveN Over a year ago

What is console.log? I will try getting further with this. Thanks!

kapa Over a year ago

@RaveN Not only programmers are able to use Google. console.log() prints values to the console of your browser.

Eric · Accepted Answer · 2012-12-01 10:46:23Z

5

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

edited Dec 1, 2012 at 10:46

answered Dec 1, 2012 at 10:37

Eric

98.1k54 gold badges257 silver badges389 bronze badges

5 Comments

RaveN Over a year ago

Thank you so far. But how do would you save the results in a variable and output each item with html? I know this is all basic :p

kapa Over a year ago

You will need a .get() also before the .join(), .map() returns a jQuery-wrapped array. Also, I find your example very confusing for a beginner, but it's nice :).

Eric Over a year ago

@bažmegakap: Why would Array.prototype.map return a jQuery-wrapped array?

RaveN Over a year ago

This is exactly what I needed! You saved me many hours of work, which I currently don't have. Great community!

kapa Over a year ago

@RaveN You can accept his answer with the tickmark to the left of this answer. Please do so.

TheLastCodeBender · Accepted Answer · 2019-01-07 07:06:49Z

1

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

answered Jan 7, 2019 at 7:06

TheLastCodeBender

5586 silver badges10 bronze badges

Comments

Rogerio de Moraes · Accepted Answer · 2015-06-15 11:56:57Z

0

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.

answered Jun 15, 2015 at 11:56

Rogerio de Moraes

1,57718 silver badges16 bronze badges

2 Comments

Rogerio de Moraes Over a year ago

when you call results.genres[$i].name with $i, function get id Element starting in 0 inside this for. If you wanna get only first element set this results.genres[0].name.

Rogerio de Moraes Over a year ago

Example JAVASCRIP jsfiddle.net/xtwqr937 Example JQUERY jsfiddle.net/a7abb0bd

Collectives™ on Stack Overflow

Output Json Arrays with Javascript

4 Answers 4

Plain Javascript

jQuery

2 Comments

5 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Plain Javascript

jQuery

2 Comments

5 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related