I have a URL that I have been provided with that returns data in JSON. I'm trying to display the value of each of this objects using jQuery AJAX call. I keep getting 'undefined'. What am I doing wrong?

The data is as follows:

[
    [
        {
            "label": "First",
            "value": "XXXXXX"
        },
        {
            "label": "Second",
            "value": "XXXXXX"
        },
        {
            "label": "Third",
            "value": "XXXXXX"
        },
        {
            "label": "Fourth",
            "value": "XXXXXX XXX"
        },
        {
            "label": "Fifth",
            "value": "XXXXXX"
        },
        {
            "label": "Sixth",
            "value": "XXXXXX"
        }
    ]
]

My jQuery is as follows:

$(document).ready(function(){
    $.ajax({
        type: 'GET',
        url: 'http://url',
        dataType: 'json',
        success: function(data) {
            var items = [];
            $.each(data, function() {
                var label = items.label;
                var value = items.value;
                $('#results').append('<p>' + label + '</p>' + '<p>' + value + '</p>');
            });
        }
    });
    return false;
});

My html is:

<div id="results">
</div>

I have a URL that I have been provided with that returns data in JSON. I'm trying to display the value of each of this objects using jQuery AJAX call. I keep getting 'undefined'. What am I doing wrong?

The data is as follows:

[
    [
        {
            "label": "First",
            "value": "XXXXXX"
        },
        {
            "label": "Second",
            "value": "XXXXXX"
        },
        {
            "label": "Third",
            "value": "XXXXXX"
        },
        {
            "label": "Fourth",
            "value": "XXXXXX XXX"
        },
        {
            "label": "Fifth",
            "value": "XXXXXX"
        },
        {
            "label": "Sixth",
            "value": "XXXXXX"
        }
    ]
]

My jQuery is as follows:

$(document).ready(function(){
    $.ajax({
        type: 'GET',
        url: 'http://url',
        dataType: 'json',
        success: function(data) {
            var items = [];
            $.each(data, function() {
                var label = items.label;
                var value = items.value;
                $('#results').append('<p>' + label + '</p>' + '<p>' + value + '</p>');
            });
        }
    });
    return false;
});

My html is:

<div id="results">
</div>

• javascript
• jquery
• ajax
• json
• undefined

4 Answers 4

The data in your JSON file is stored as an array within an array. Try this:

$(document).ready(function() {
 $.ajax({
     type: 'GET',
     url: 'http://url',
     dataType: 'json',
     success: function(data) {
         for (var i = 0; i < data.length; i++) {
             var items = data[i];

             $('#results').append('<div class="block"></div>');
             var $block = $('#results').find('.block').last();

             for (var j = 0; j < items.length; j++) {
                 var item = items[j];
                 var label = item.label;
                 var value = item.value;
                 $block.append('<p>' + label + '</p>' + '<p>' + value + '</p>');
             }
         }
     }
 });
 return false;
 });

You didn't add params to your each function:

  $.each(data, function(index,item) {
                    var label = item.label;
                    var value = item.value;
                    $('#results').append('<p>' + label + '</p>' + '<p>' + value + '</p>');
                });

Also if your json is exaclty like you wrote it you should do $.each(data[0],function()...)

        $.each(data, function(key, items) {
            var label = items.label;
            var value = items.value;
        }

Remove var items = []; from your code

Rest should work hopefully

Thank you guys for your answers. It has helped me solve the issue. Each provide it some useful info and with a bination of all answers I got the code to work this way

$(document).ready(function(){
    $.ajax({
        type: 'GET',
        url: 'http://url',
        dataType: 'json',
        success: function(data) {
            for (var i = 0; i < data.length; i ++ ){
                $.each(data[i], function(index, items) {
                    var label = items.label;
                    var value = items.value;
                    $('#results').append('<p>' + label + '</p>' + '<p>' + value + '</p>');
                });
            }
        }
    });
    return false;
});

So I removed 'var = items' as Mat suggested. I also added 'data[0]' and params to my each function like user733421 suggested, but that only display the first array objects. I have close to 200 arrays with several objects on each. So to loop through the whole data I added the 'for' statement as 0x12 suggested.

Now, all the data is displaying, but can somebody confirm that the way I did it is proper.

Again thank you guys great teamwork.