CODEWITHSUNDEEP
jqueryajaxjson
Jammer
Jammer

Reputation: 2410

AJAX Iterate through JSON using Jquery

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

Upvotes: 1

Views: 55

Answers (2)

Pranay Rana
Pranay Rana

Reputation: 176896

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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

Upvotes: 2

Related Questions