CODEWITHSUNDEEP
jqueryjson
hughesdan
hughesdan

Reputation: 2851

Why do I keep getting 'undefined' for each item in this JSON array?

The following is returning 'undefined' as the value for each item. Can someone show me why?

Jquery

    $("button").click(function () {
    var estimateID = this.id;
    var baseURL = "/Dashboard/EstimateDetails/";
    var url = baseURL + estimateID;
    $.getJSON(url, function (data) {
        for (var i = 0; i <= data.details.length; i++) {
            $('#Details').html("<p>item1=" + data.details.Dma + " item2=" + data.details.Callsign + " item3=" + data.details.Description + "</p>");
        }
    });

JSON

{
    "details": [{
        "Dma": "Albany-Schenectady-Troy",
        "CallSign": "WRGB",
        "Description": "WRGB (CBS) Schenectady"
    }, {
        "Dma": "Albany-Schenectady-Troy",
        "CallSign": "WTEN",
        "Description": "WTEN (ABC) Albany "
    }, {
        "Dma": "Albany-Schenectady-Troy",
        "CallSign": "WXXA",
        "Description": "WXXA (Fox) Albany "
    }, {
        "Dma": "Atlanta",
        "CallSign": "WGCL",
        "Description": "WGCL (CBS) Atlanta "
    }, {
        "Dma": "Atlanta",
        "CallSign": "WXIA",
        "Description": "WXIA (NBC) Atlanta "
    }, {
        "Dma": "Austin",
        "CallSign": "KXAN",
        "Description": "KXAN (NBC) Austin "
    }, {
        "Dma": "Austin",
        "CallSign": "KVUE",
        "Description": "KVUE (ABC) Austin "
    }, {
        "Dma": "Baltimore",
        "CallSign": "WMAR",
        "Description": "WMAR (ABC) Baltimore "
    }, {
        "Dma": "Baltimore",
        "CallSign": "WBAL",
        "Description": "WBAL (NBC) Baltimore"
    }, {
        "Dma": "Baltimore",
        "CallSign": "WJZ ",
        "Description": "WJZ  (CBS) Baltimore "
    }, {
        "Dma": "Baltimore",
        "CallSign": "WBFF",
        "Description": "WBFF (Fox) Baltimore "
    }]
}

EDIT - the result when I run the above code is a single line of HTML added to the details div as follows:

item1=undefined item2=undefined item3=undefined

Upvotes: 1

Views: 199

Answers (6)

Muhammad Usman
Muhammad Usman

Reputation: 12503

Use

data.details[i].Dma etc

Also add -1 in the loop data.details.length-1, because index starts with 0.

for (var i = 0; i <= data.details.length-1; i++) {
  $('#Details').html("<p>item1=" + data.details[i].Dma + " item2=" + data.details[i].Callsign + " item3=" + data.details[i].Description + "</p>");
}

Demo: http://jsfiddle.net/aqPvL/

Upvotes: 1

hvgotcodes
hvgotcodes

Reputation: 120188

data.details.Callsign is wrong

data.details[i].Callsign

is what you want, i.e. you are missing the array index as you loop over details. Notice you are doing that for multiple variables.

Cleaner code might help. Separating the variables out like so is a good start...

 $.getJSON(url, function (data) {
     var details = data.details,
         dma, callSign,...; // and the rest of whatever you need

     for (var i = 0; i <= details.length; i++) {
         dma      = details[i].Dma;
         callSign = details[i].Callsign;
         // more here

         $('#Details').html("<p>item1=" + dma + " item2=" + callSign + ...
     }            
 });

Is much more readable, and less error prone IMHO.

EDIT -- as pointed out in comments, html will overwrite the content of your div each time in the loop. You probably want append instead.

Upvotes: 3

dgvid
dgvid

Reputation: 26633

You've defined details as an array, therefore you need to index it to access its members. In the for loop, for example, you want this type of thing:

data.details[i].Dma

instead of

data.details.Dma

By the way, you could use a jQuery each callback instead of a for loop:

if (data && data.details) {
    $.each(data.details, function() {
            $('#Details').html("<p>item1=" + this.Dma + " item2=" + this.Callsign +
                " item3=" + this.Description + "</p>");
        });
}

Within the callback function passed to each, this stands in for data.details[i] in the for loop.

Upvotes: 1

Michael Mior
Michael Mior

Reputation: 28752

You left off the array index in your loop.

$("button").click(function () {
    var estimateID = this.id;
    var baseURL = "/Dashboard/EstimateDetails/";
    var url = baseURL + estimateID;
    $.getJSON(url, function (data) {
        for (var i = 0; i <= data.details.length; i++) {
            $('#Details').html("<p>item1=" + data.details[i].Dma + " item2=" + data.details[i].Callsign + " item3=" + data.details[i].Description + "</p>");
        }
    });

Upvotes: 1

timDunham
timDunham

Reputation: 3318

add the index to the end of data.details

data.details.Dma becomes data.details[i].Dma

Upvotes: 0

cpjolicoeur
cpjolicoeur

Reputation: 13106

inside the for loop you need to reference your objects via data.details[i]

for example

data.details[i].Callsign

not

data.details.Callsign

Upvotes: 0

Related Questions