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, Dec 01 '12 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, Dec 01 '12 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, Dec 01 '12 at 10:46

score 8 · Answer 1 · edited Jun 20 '20 at 09:12

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 '20 at 09:12

Community

1
1

answered Dec 01 '12 at 10:36

kapa

77,694
21
158
175

What is console.log? I will try getting further with this. Thanks! – RaveN Dec 01 '12 at 10:44
1

@RaveN Not only programmers are able to use Google. `console.log()` prints values to the console of your browser. – kapa Dec 01 '12 at 10:44

Eric · Accepted Answer · 2012-12-01T10:46:23.317

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 01 '12 at 10:46

answered Dec 01 '12 at 10:37

Eric

95,302
53
242
374

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 – RaveN Dec 01 '12 at 10:40
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 :). – kapa Dec 01 '12 at 10:49
@bažmegakap: Why would `Array.prototype.map` return a jQuery-wrapped array? – Eric Dec 01 '12 at 10:50
This is exactly what I needed! You saved me many hours of work, which I currently don't have. Great community! – RaveN Dec 01 '12 at 10:54
@RaveN You can accept his answer with the tickmark to the left of this answer. Please do so. – kapa Dec 01 '12 at 11:00

score 1 · Answer 3 · answered Jan 07 '19 at 07:06

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 07 '19 at 07:06

TheLastCodeBender

538
5
10

score 0 · Answer 4 · answered Jun 15 '15 at 11:56

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 '15 at 11:56

Rogerio de Moraes

1,527
18
15

2

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 Jun 15 '15 at 11:59
2

Example JAVASCRIP https://jsfiddle.net/xtwqr937/ Example JQUERY https://jsfiddle.net/a7abb0bd/ – Rogerio de Moraes Jun 15 '15 at 12:38

Output Json Arrays with Javascript

4 Answers4

Plain Javascript

jQuery