JQuery - parsing JSON data - having problems with variable name

Question

First, I delve into working with JSON data. I have some experience using jQuery though.

I am sending to this URL (tumblr api): jyoseph.com/api/read/json

What I'm trying to do is json output which is returned. What I still have:

$(document).ready(function(){ $.getJSON("http://jyoseph.com/api/read/json?callback=?", function(data) { //console.log(data); console.log(data.posts); $.each(data.posts, function(i,posts){ var id = this.id; var type = this.type; var date = this.date; var url = this.url; var photo500 = this.photo-url-500; $('ul').append('<li> ' +id+ ' - ' +type+ ' - ' +date+ ' - ' +url+ ' - ' +photo500+ ' - ' + ' </li>'); }); }); }); 

See my jsbin post for the whole script: http://jsbin.com/utaju/edit

Some of the tumblr keys have hyphens in them -, and this seems to be causing the problem. As you can see, "photo-url-500" or another "photo header" causes the script to break, outputting NaN.

Is there a problem with a hyphen in key names? Or am I all about this wrong?

Answer 1

If there is a dash in the names, you will need to access them differently. Change var photo500 = this.photo-url-500; on var photo500 = this["photo-url-500"]; .

Answer 2

Note that it’s best not to add to each iteration. It’s better to add to the row or press an array, and then add it once after the iterator completes. Adding to the house is expensive.

Answer 3

Use parenthesis to access members:

 var photo500 = this['photo-url-500'];