Jquery: dealing with a json response?

Question

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 undefined. 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.

Answer 1

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".....

Answer 2

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()

Answer 3

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

Answer 4

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.