How to display json feed to user? - json

Question

I have a valid json feed that I am pulling from the server by accessing a php file using jquery. An example of the json feed returned from querying the php file is
{"items":[{"acc_number":"11111","acc_name":"TestAccount","demographics":["Some
Street","SomeState","99999"],"last_thirty":null,"phone":null,"sms":null,"email":null}, {"acc_number":"22222","acc_name":"MyAccount","demographics":"MyStreet","MyState","99999"],"last_thirty":null,"phone":null,"sms":null,"email":null}],"total_items":"80","md5sum":"c7a834d45bdf348abfdcdb95994c7608"}
I am using the code below which I though would go through feed and bring down all of the records and fields that were not NULL. But I am not getting anything.
$.ajax({
type= 'GET',
url: 'http://MyURL.com',
dataType: 'json',
username: myusername,
password: mypassword,
success: function(data) {
var items = [];
$.each(data, function(key,val) {
items.push('<li id="' = key = '">' + val + '</li>');
});
$('<ul/>', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('body');
}
});
}
Any help/tips is appreciated as always.
Thanks!
Updated based on answers below.
$(document).ready(function() {
testNews();
});
function testNews() {
$('body').append('<h1>News</h1>');
$('body').append('<h2>Main Display</h2>');
$('body').append("<div id='success_news_main' class='waiting'>Waiting for response</div>");
$.ajax({
type: "GET",
url: 'http://MyURL.com/news.php',
dataType: 'json',
username: myusername,
password: mypassword,
success: function(data) {
var ul = $('<ul/>').addClass('my-new-list').appendTo('body');
$.each(data.items, function(k,v) {
$('<li/>').attr('id', k).html(v).appendTo(ul);
});
}
});
}

Answer 1

Try iterating over data.items and not over data as this is your collection:
success: function(data) {
var items = [];
$.each(data.items, function(key, val) {
items.push('<li id="' + key + '">' + val + '</li>');
});
...
}
Also your items.push method seems broken with those multiple = characters. You probably meant +.
Another remark is the val variable inside the $.each statement. It will be an object. You probably want to select a specific property from this object, like:
items.push('<li id="' + key + '">' + val.acc_number + '</li>');
And the key will be the index of the array. And because ids in HTML cannot start with a number if you want to have valid HTML you might need to prefix your li id:
items.push('<li id="item_' + key + '">' + val.acc_number + '</li>');

Answer 2

You shouldn't use string concatenation when forming the html tags for display. Instead use jQuery's functions create the dom elements, add attribute values to them and add them to the page.
Here's a suggestion on modifying your code:
$.ajax({
type= 'GET',
url: 'http://MyURL.com',
dataType: 'json',
username: myusername,
password: mypassword,
success: function(data) {
var ul = $('<ul/>').addClass('my-new-list').appendTo('body');
$.each(data.items, function(k,v) {
$('<li/>').attr('id', k).html(v).appendTo(ul);
});
}
});
This is also easier to read and doesn't look through the array twice.
Also, the "v" variable within "$.each" will be the objects of the array within the json. You'll need to access their individual properties and create the necessary html/elements within the li instead of setting it directly as the html property.

Answer 3

Iterate over the data.items since the JSON returns the values in that array. This code example also fixes "=" where "+" should have been.
$.ajax({
type= 'GET',
url: 'http://MyURL.com',
dataType: 'json',
username: myusername,
password: mypassword,
success: function(data) {
var items = [];
$.each(data, function(key,val) {
items.push('<li id="' + key + '">' + val + '</li>');
});
$('<ul/>', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('body');
});
});