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
data.details.Callsign is wrong
ReplyDeletedata.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.
You left off the array index in your loop.
ReplyDelete$("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>");
}
});
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:
ReplyDeletedata.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.
Use
ReplyDeletedata.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/
inside the for loop you need to reference your objects via data.details[i]
ReplyDeletefor example
data.details[i].Callsign
not
data.details.Callsign
add the index to the end of data.details
ReplyDeletedata.details.Dma becomes data.details[i].Dma