jQuery: Loop through JSON document

Question

I have the following JSON structure on "y" location:

{"results":[{
    "a_id":4529245,
    "type":"a",
    "name":"HONDA"
},{
    "a_id":1234567,
    "type":"l",
    "name":"Autos Marron"
}]}

Inside my JS document I have the following code:

    var i;
    i=0;
    $.getJSON('/document/location', function( data ) {

        console.log(data);

        $.each( data, function( key, val ) {

            var contentString = '<span>'+
            val[i].name +
            '</span>';

            $('#info').append(contentString);

            i++;
        });
    });

I searched online and I readed that I would be able to do val.name and would be able to print each of the "name" variables inside my JSON document.

But I have to use a incrementing variable (i) in order to print only the first variable that equals to "HONDA" using val[i].name

I'd like to print all variables called name. What am I doing wrong?

Thanks in advance

Still not clear what exactly you want.. "...But I have to use a incrementing variable (i) in order to print only the first variable that equals to "HONDA" using val[i].name I'd like to print all variables called name." — Chintan Soni
– Chintan Soni, Commented Jun 14, 2015 at 4:15
You want to print just honda or all the values of 'name' attribute ? — Chintan Soni
– Chintan Soni, Commented Jun 14, 2015 at 4:18
@ChintanSoni sorry if I didn't explain good enough myself (not a native english speaker)... I want to print all values of 'name' attribute. I'm not able to loop trough all of this 'name' attributes with my current code — Daniel
– Daniel, Commented Jun 14, 2015 at 4:20
And when I use the codes in the answers already given, I get "undefined" on the browser's console if I do console.log(val.name) — Daniel
– Daniel, Commented Jun 14, 2015 at 4:21
Daniel, provide your "/document/location" content, what their content ?, show it — Walter Chapilliquen - wZVanG
– Walter Chapilliquen - wZVanG, Commented Jun 14, 2015 at 4:21

Ajay Narain Mathur · Accepted Answer · 2015-06-14 04:24:23Z

3

You need to loop data.results as this is the array you want to access:

Code

$.getJSON('/document/location', function( data ) {

    console.log(data);

    $.each( data.results, function(key,val ) {

        var contentString = '<span>'+
        val.name +
        '</span>';

        $('#info').append(contentString);

    });
});

** In your code when you loop through data you get:

val as

[{
            "a_id":4529245,
            "type":"a",
            "name":"HONDA"
        },{
            "a_id":1234567,
            "type":"l",
            "name":"Autos Marron"
        }]

and key as results

Now since val is an array to display name you had to do data[index].name

Edit:

Here is working fiddle

edited Jun 14, 2015 at 4:24

answered Jun 14, 2015 at 4:08

Ajay Narain Mathur

5,5063 gold badges24 silver badges34 bronze badges

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

2 Comments

Daniel Over a year ago

Using your code I'm doing a console.log(val.name) and I get undefined on my Chrome browser console

Daniel Over a year ago

Thank you, it works as expected now, I had to leave (key, val) on the $.each line instead of just (val) as someone here mentioned. Again, many thanks

Ajay Narain Mathur · Accepted Answer · 2016-06-13 02:21:17Z

3

Why not you make a simple for loop instead of using $.each.

Try this:

for(int i=0;i<data.length;i++){
    var contentString = '<span>'+
    data[i].name +
    '</span>';    
}

edited Jun 13, 2016 at 2:21

Ajay Narain Mathur

5,5063 gold badges24 silver badges34 bronze badges

answered Jun 14, 2015 at 4:15

vs_lala

7452 gold badges8 silver badges18 bronze badges

2 Comments

Daniel Over a year ago

thank you but who is data? I'm accessing to an external document, data is not a local variable

vs_lala Over a year ago

data is the variable you stored your response to. I din't mentioned the whole code but just the snippet for you to understand :)

squill25 · Accepted Answer · 2015-06-14 04:07:44Z

1

Try this:

$.each( data.results, function( val ) { // change data to data.results, and you are looping through an array so there is no key; only a val

    var contentString = '<span>'+
    val.name +
    '</span>';

    $('#info').append(contentString);

    // i++; You don't need i at all
});

answered Jun 14, 2015 at 4:07

squill25

1,1988 silver badges20 bronze badges

1 Comment

Daniel Over a year ago

Using your code I'm doing a console.log(val.name) and I get undefined on my Chrome browser console

Chintan Soni · Accepted Answer · 2015-06-14 04:33:58Z

Ok.. First if all, if you are having .json file in other folder then, specify path to it:

Say, your directory structure is like:

|---data
    |---test.json
|---js
|---css
|---index.html

Then, your code looks like:

$.getJSON("data/test.json", function(json) {
    console.log(json); // this will show the info it in firebug console

    var tempData = "";
    $.each( json.results, function(index, element) {
        tempData  += '<span>'+element.name +'</span>';
    });
    $('#info').html(tempData);
});

Note: Its not good habit of traversing DOM for every element in loop. Like I saw in other answers. Say you got 100 elements in your array, then its worthless traversing DOM 100 times just to append 1 data at a time. So, you can optimise this to having variable that holds the data to be displayed in html, and after looping over the array, just use .append("") or .html("") depending on your need. Hope you got it..

ArcangelZith · Accepted Answer · 2015-06-14 05:27:27Z

1

Having the following structure

{
    "results": [
        {
            "a_id": 4529245,
            "type": "a",
            "name": "HONDA"
        },
        {
            "a_id": 1234567,
            "type": "l",
            "name": "Autos Marron"
        }
    ]
}

For a string better performance try

$.getJSON('/document/location', function( data ) {

    var buffer = [];

    $.each( data.results, function( index, entry )
    {
        buffer.push( '<span>', entry.name, '</span>' );
    });

    $('#info').append( buffer.join('') );
});

For safe code (to prevent injection) with better performance try

$.getJSON('/document/location', function( data ) {

    var box = document.createDocumentFragment();

    $.each( data.results, function( index, entry )
    {
        $( '<span>' ).text( entry.name ).appendTo( box );
    });

    $('#info').append( box );
});

Test safe and unsafe code in fiddle

edited Jun 14, 2015 at 5:27

answered Jun 14, 2015 at 4:42

ArcangelZith

1014 bronze badges

2 Comments

Daniel Over a year ago

This is actually great info! thanks, I'm currently using pretty complex code with Google maps and I think I wouldn't know how to implement this but I will try. Again, thanks :)

ArcangelZith Over a year ago

Me gusta ayudar a quien lo necesite :)

Collectives™ on Stack Overflow

jQuery: Loop through JSON document

5 Answers 5

2 Comments

2 Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related