Reading a JSON output in JavaScript with a lot of objects

Question

This is my JSON output:

[
  {
    "Business": [
      {
        "id": "5739"
      },
      {
        "userid": ""
      },
      {
        "name": "Ben Electric"
      },
      {
        "description": ""
      },
      {
        "address": ""
      },
      {
        "email": "*****@gmail.com"
      },
      {
        "phone2": "050*****88"
      },
      {
        "phone3": ""
      },
      {
        "mobile": "050****88"
      },
      {
        "opentimes": ""
      },
      {
        "services": ""
      },
      {
        "places": ""
      },
      {
        "logo": null
      },
      {
        "image": null
      },
      {
        "video": ""
      },
      {
        "owner_name": "Ben Brant"
      },
      {
        "owners": "1"
      },
      {
        "userpic": "http://graph.facebook.com/****/picture"
      },
      {
        "circle": "3"
      },
      {
        "fc": "0"
      },
      {
        "rating_friends": ""
      },
      {
        "rating_global": "3.3333"
      },
      {
        "advice": ""
      },
      {
        "subscription": "none"
      }
    ]
  },
  {
    "Business": [
      {
        "id": "5850"
      },
      {
        "userid": ""
      },
      {
        "name": "Bla Bla"
      },
      {
        "description": ""
      },
      {
        "address": ""
      },
      {
        "email": "*****@gmail.com"
      },
      {
        "phone2": ""
      },
      {
        "phone3": ""
      },
      {
        "mobile": "0*****995"
      },
      {
        "opentimes": ""
      },
      {
        "services": ""
      },
      {
        "places": ""
      },
      {
        "logo": null
      },
      {
        "image": null
      },
      {
        "video": ""
      },
      {
        "owner_name": "Ben VBlooo"
      },
      {
        "owners": "1"
      },
      {
        "userpic": "http://graph.facebook.com/******/picture"
      },
      {
        "circle": "3"
      },
      {
        "fc": "0"
      },
      {
        "rating_friends": ""
      },
      {
        "rating_global": "2.0000"
      },
      {
        "advice": ""
      },
      {
        "subscription": "none"
      }
    ]
  },
  {
    "Info": {
      "message": "No user for the business"
    }
  },
  {
    "OK": {
      "message": "By Circle"
    }
  }
]

I'm trying to get the objects in javascript in this way but it doesnt work, should i loop through each Business object?? is there a way to access the real data objects directly?

Here's what I'm trying:

   $.ajax({
    type: 'POST',
    url: 'BLABLA',
    data: { BLABLA },
    dataType: 'json',
    success: function( resp ) {
        if(resp.length == 0) {
        $('.searchol').append('<li>No results found.</li>');
          return;
        }
      $.each(resp, function(index, element) {
         $('.searchol').append('Users Picture: '+element.Business.userpic);

But I cant seem to get to the object?

Answer 1

I just tried this code using your sample json like that

$.each(resp, function(index,element){
   $.each(element, function(ind,ele){
     if(ele.length){
        $.each(ele,function(ind,ele){
          if(ele.userpic) 
           console.log(ele.userpic)
        })
     }
   })
})

Answer 2

"Business" is referring to an array (square bracket), so element.Business.userpic does not exist (element.Business[0].userpic exists though). Depending on what you want to achieve, you'll either have to loop through Business or access userpic of a particular array item.

Answer 3

Your business object is a array of object

"Business": [
  {
    "id": "5850"
  },

Check this JSFiddle script on how to read that

Sample output

Picture: undefined (index):192
Picture: http://graph.facebook.com/****/picture 

Answer 4

This will help you out

$.each(resp, function(index, element) {
         $('.searchol').append('Users Picture: '+element.Business["userpic"]);

Answer 5

Your JSON is weird. Instead of :

Business : [
  { id : 'id1' }
  { name : 'name1' }
]


Business[0].id // access id
Business[1].name // access name

Where you have to remember where each attribute is in the array (or loop over the array to find it), you should have:

Business : {
  id : 'id1',
  name : 'name1'
}

Business.id // access id
Business.name // access name

---

If you can't change the JSON, you can use the following 2 methods to quickly get a property of Business:

var propMap = {
  id : 0,
  userid : 1,
  name : 2 // etc
}

function getBusinessProp(business, prop) {
  return business[propMap[prop]][prop];
}

// usage :
$('.searchol').append('Users Picture: '+ getBusinessProp(element.Business, 'userpic'));

If your array can be missing some items or the items can be in a different order for each business, then you need to iterate to find the property you're interested in:

function getBusinessProp(business, prop) {
  for (var i=0; i<business.length; i++) {
    if (business[i].hasOwnProperty(prop)) {
      return business[i][prop];
    }
  }
}

// same usage, no need for the map anymore

The second method is probably better because it won't break if you change the order of the array or add new items in the array, etc and the performance boost given by using the map is probably not enough to justify the added maintenance cost.