jQuery/Javascript pulling info from an object.

Question

Hi All,

I am trying to use the following code to create a list of client names from some json returned from an Ajax call.

The data is as follows:

{"status":1,"data":{"clients":[{"ClientID":"1","AccountID":"1","ClientName":"Access Loan Mitigation","Active":"1"},{"ClientID":"2","AccountID":"1","ClientName":"Big Time Business","Active":"1"},{"ClientID":"3","AccountID":"1","ClientName":"Bill Releford","Active":"1"},{"ClientID":"4","AccountID":"1","ClientName":"Bonnie Silverman","Active":"1"},{"ClientID":"5","AccountID":"1","ClientName":"Dear Holdings","Active":"1"},{"ClientID":"6","AccountID":"1","ClientName":"Calm Dental","Active":"1"},{"ClientID":"7","AccountID":"1","ClientName":"Eva Field","Active":"1"},{"ClientID":"8","AccountID":"1","ClientName":"First Independent Pictures","Active":"1"},{"ClientID":"9","AccountID":"1","ClientName":"Gallery 825","Active":"1"},{"ClientID":"10","AccountID":"1","ClientName":"Greenway Arts Alliance","Active":"1"},{"ClientID":"11","AccountID":"1","ClientName":"International Strategy Group","Active":"1"},{"ClientID":"12","AccountID":"1","ClientName":"Ramtin","Active":"1"},{"ClientID":"13","AccountID":"1","ClientName":"Spabro","Active":"1"},{"ClientID":"14","AccountID":"1","ClientName":"LMGA","Active":"1"},{"ClientID":"15","AccountID":"1","ClientName":"Main Street Business Association","Active":"1"},{"ClientID":"16","AccountID":"1","ClientName":"Rabbit Animation","Active":"1"},{"ClientID":"17","AccountID":"1","ClientName":"Rooms & Gardens","Active":"1"},{"ClientID":"18","AccountID":"1","ClientName":"Summertime","Active":"1"},{"ClientID":"19","AccountID":"1","ClientName":"Sue Shellock","Active":"1"},{"ClientID":"20","AccountID":"1","ClientName":"Susan Gates","Active":"1"},{"ClientID":"21","AccountID":"1","ClientName":"The Park Entertainment","Active":"1"},{"ClientID":"22","AccountID":"1","ClientName":"Unified Dispatch","Active":"1"},{"ClientID":"23","AccountID":"1","ClientName":"Westside Media Group","Active":"1"},{"ClientID":"24","AccountID":"1","ClientName":"YHD","Active":"1"},{"ClientID":"25","AccountID":"1","ClientName":"Discoverfire, Inc.","Active":"1"}]}}

and the code is like so:

  for (var Client in o.data.clients) {
   $('#list_container').append("<div>"+Client.ClientName+"</div>");
  }

Not quite working, and I've tried a few different ways of accessing the ClientName property. Javascript isn't my strongest language, and getting data out of objects just kills me - used to PHP object and arrays.

I'm sure this is simple - can somebody show the right syntax?

Thanks!

Answer 1

Clients is an array so it's better to use jQuery's each on it:

$.each( o.data,clients, function(idx, client) {
   // use client.ClientName here
});

Answer 2

That's not quite how the for loop works. An easier, more accurate, and more reliable way to tackle this is to use the traditional for syntax like so:

for (var i = 0; i < o.data.clients.length; i++) {
    var client = o.data.clients[i];
    $('#list_container').append("<div>"+client.ClientName+"</div>");
}

The for syntax you were using will work, but it's still iterating over indices (not values), and even then it's not limited to just the integer indices in the array — it could also include other properties defined on the array prototype, or even on the particular array object. Iterating using the boring i = 0 syntax is a far better option for traditional arrays like this.