Jquery: dealing with a json response?
I am having trouble parsing the response from my app. Here is the call with my best guess at how to deal with the json coming back...
$.ajax({
url: 'houses.json',
method: 'GET',
datatype: 'json',
success: function (data) {
$.each(data, function (h) {
$(h).each(function () {
console.log(h.address);
});
});
});
Here is the response I am getting back from the server:
[{
"house": {
"address": "7 view st dunedin nz",
"lng": 170.500908,
"id": 3,
"lat": -45.875059
}
}, {
"house": {
"address": "26 brown st dunedin nz",
"lng": 170.496236,
"lat": -45.875834,
}
}]
the best I can get is having it say un开发者_如何学Godefined. Once. I am trying to set up a loop for creating markers for a google map. I could use another pair of eyes. Anyone? Thanks.
Since h
is an array, you need to go down the property chain, h
is a collection of house
objects which have an address
property, so change it a bit, like this:
$.each(data, function(i, h){
console.log(h.house.address);
});
Make sure to remove that extra loop around it, no need since there's only one array.
Here's a visual way to think of it:
h h.house h.house.address
[ { "house":{ "address":"7 view st dunedin nz".....
The first parameter in the callback for each
is the index, so you need two parameters:
$.ajax({
url: 'houses.json',
method: 'GET',
datatype: 'json',
success: function(data){
$.each(data, function(i, item){
$.each(item, function(j, house){
console.log(house.address);
});
});
});
Alternatively you can use the fact that the item is set as the context for the callback, so you can use the this
keyword to access it:
$.ajax({
url: 'houses.json',
method: 'GET',
datatype: 'json',
success: function(data){
$.each(data, function(){
$.each(this, function(){
console.log(this.address);
});
});
});
The inner loop will loop through the properties in the object, which is only one. You can access the property directly instead:
$.ajax({
url: 'houses.json',
method: 'GET',
datatype: 'json',
success: function(data){
$.each(data, function(){
console.log(this.house.address);
});
});
It should be like
$.ajax({
url: 'houses.json',
method: 'GET',
dataType: 'json',
success: function(data){
$.each(data, function(h){
console.log(h.house.address);
});
Note the dataType: 'json',
and console.log(h.house.address);
sections.
It is because, you define the callback function as function(h)
thinking, h
is an object from the array. But it isn't, it is the index of the element.
Just leave the parameters and use this
(points to the element):
$.each(data, function(){
console.log(this.house.address);
});
or define both parameters:
$.each(data, function(index, element){
console.log(element.house.address);
});
or access the array by the index:
$.each(data, function(h){
console.log(data[h].house.address);
});
Nick already said, how you should access the properties.
Reference: each()
精彩评论