AJAX Iterate through JSON using Jquery

Question

I am trying to display JSON data from a URL. Is there a way to specify the column I want to display e.g. JsonData.Title as i've tried many ways but can't get it to work this way.

JSON DATA

[{"Id":66,"Code":"B10001","Title":"Hydraulic Breaker Power Pack and Breaker","Make":"Belle","Model":"Midi 20-140"},
{"Id":67,"Code":"B10001a","Title":"25Kg Hydraulic Breaker","Make":"Belle","Model":"2025-3025"},
{"Id":68,"Code":"B10002","Title":"Hydraulic Breaker Power Pack and Breaker (Petrol)","Make":"JCB","Model":"Beaver"},
{"Id":69,"Code":"B10002a","Title":"25Kg Hydraulic Breaker","Make":"JCB","Model":"HM25"},
{"Id":73,"Code":"B10501","Title":"Rotary Hammer Drill with SDS Plus","Make":"Bosch","Model":"GBH2SE"}]

Javascript

function GetJson() {

            $.ajax(
            {
                url: "url to web service",
                type: 'get',
                dataType: 'json',
                async: true,
                success: function (data) {

                    var JsonData = $.parseJSON(data);

                    $.each(JsonData, function () {

                        console.log(JsonData.Title);

                        //$.each(this, function(key, value){
                            //alert(key + " --> " + value);
                        //});
                    });

                    var result = data;

                },
                error: function onXmlError() {
                    alert("An Error has occurred.");
                }
            });
        }

Rory McCrossan · Accepted Answer · 2015-07-15 15:45:20Z

2

Your usage of $.each means you get access to the object within the iteration through the parameters passed to the handler function. Also note that because you specified dataType: 'json you don't need to use $.parseJSON again. Try this:

success: function (data) {
    $.each(data, function(index, obj) {
        console.log(obj.Title);
    });
},

answered Jul 15, 2015 at 15:45

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

1 Comment

Jammer Over a year ago

Thanks that's worked. Was sure i'd tried that but maybe because I was using $.parseJSON again.

Pranay Rana · Accepted Answer · 2015-07-15 15:52:24Z

0

It seems JsonData is array of itme not single item so you need to access it as arrya JsonData[i].property. for jQuery you can use each() function as below

$(jsondata).each(function(i,val)
 {
    console.log(val.Title);     
});

if have trouble with each() than go with simeple javascript , this will also hleps you understand that its array not single object

for(var i in JsonData)
{
     var Title = JsonData[i].Title;
     console.log(Title);
}

edited Jul 15, 2015 at 15:52

answered Jul 15, 2015 at 15:46

Pranay Rana

177k37 gold badges244 silver badges267 bronze badges

Collectives™ on Stack Overflow

AJAX Iterate through JSON using Jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related