Jquery Ajax Json data Undefined

Question

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>

raggle · Accepted Answer · 2014-08-22 09:41:18Z

1

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

edited Aug 22, 2014 at 9:41

answered Aug 21, 2014 at 15:08

raggle

1061 silver badge3 bronze badges

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

2 Comments

Raul Cruz Over a year ago

Thanks for your help it work great, my question now is how can I wrap each array on a <div class="block"></div> I have over 200 arrays similar to the one I posted

raggle Over a year ago

I've updated the code to wrap the <div class="block"></div> around each array. This presumes your arrays are all contained within your outer array.

user733421 · Accepted Answer · 2014-08-21 14:56:49Z

1

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()...)

answered Aug 21, 2014 at 14:56

user733421

4974 silver badges14 bronze badges

Comments

Coder John · Accepted Answer · 2014-08-21 14:57:37Z

0

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

Remove var items = []; from your code

Rest should work hopefully

answered Aug 21, 2014 at 14:57

Coder John

7864 silver badges7 bronze badges

Comments

Raul Cruz · Accepted Answer · 2014-08-21 17:46:34Z

Thank you guys for your answers. It has helped me solve the issue. Each provide it some useful info and with a combination 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.

Collectives™ on Stack Overflow

Jquery Ajax Json data Undefined

4 Answers 4

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Related