jQuery/Javascript pulling info from an object

Question

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!

In addition, "<div>"+Client.ClientName+"</div>" is wrong (for clients with a ‘&’ in their name) and potentially dangerous (for clients with names like “Terry <script>CookieStealer()</script> and Sons Ltd.”). Create a div element, set $(div).text(Client.ClientName), then add it to the container. Concatenating strings into HTML is almost always the wrong thing. — bobince
– bobince, Commented Sep 1, 2009 at 22:04
Thanks! I'm aware of this, but wanted a clean demo. Good thing to bring up though. — Eli
– Eli, Commented Sep 1, 2009 at 22:20

seth · Accepted Answer · 2009-09-01 21:17:38Z

2

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

answered Sep 1, 2009 at 21:17

seth

37.3k7 gold badges63 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eli Over a year ago

I can see I'm going to have to check into jQuery's utilities a bit more closely. Beautiful - thanks!

VoteyDisciple · Accepted Answer · 2009-09-01 21:18:11Z

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.

answered Sep 1, 2009 at 21:18

VoteyDisciple

37.9k5 gold badges100 silver badges100 bronze badges

Collectives™ on Stack Overflow

jQuery/Javascript pulling info from an object

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related