In the callback function you would just go through each element. Let's say you wanted to append the names to a div with the id of namesDiv you might do this:
$.get("something.aspx", function(json) {
for(var i =0; i< json.names.length; i++)
{
$('#namesDiv').append(json.names[i]);
}
You can create HTML elements programmatically, to build an HTML List for example:
$('<div></div>').appendTo('#container').html(data.title);
var $nameList = $('<ul></ul>');
$.each(data.names, function (i, val) {
$('<li></li>').appendTo($nameList).html(val);
});
$('#container').append($nameList);
Example here.
Without jQuery:
var container = document.getElementById('container'),
title = document.createElement('div'),
nameList = document.createElement('ul'), li;
title.innerHTML = data.title;
for (var i = 0; i < data.names.length; i++) {
li = document.createElement('li');
li.innerHTML = data.names[i];
nameList.appendChild(li);
}
container.appendChild(title);
container.appendChild(nameList);
Example here.
Edit: In response to your comment, you were missing the Flickr specific parameter jsoncallback to make the JSONP request, and also in the structure of the JSON response the names member doesn't exists, I think you mean items.
Check your feed example fixed here.
There is a firefox plugin which formats json data. https://addons.mozilla.org/en-US/firefox/addon/10869
This is assuming you only want to learn what the json data looks like and hence start programming in it...
Very long in the tooth, but it does take care to recognize that properties of your object may have their own properties as well. Assumes a DIV element (or similar) exists with an ID of "content."
function WriteObject(obj, tabs)
{
tabs = tabs || 0;
var padding = "";
for(var i = 0; i < tabs; ++i)
{
padding += "\ ";
}
for(var prop in obj)
{
if(typeof(obj[prop]) === "object")
{
if(obj[prop].constructor === Array)
{
var str = obj[prop].join(",");
$("#content").append(padding + prop + ": " + str + "<br />");
}
else
{
$("#content").append(padding + prop + "<br />");
WriteObject(obj[prop], tabs + 1);
}
}
else
{
$("#content").append(padding + prop + ": " + (obj[prop] ? obj[prop] : "null") + "<br />");
}
}
}
You can try the page below:
In modern browsers you don't need anymore the json2.js library from json.org
<html>
<head>
<script src="http://www.json.org/json2.js"></script>
</head>
<body>
<pre id="res"></pre>
<script>
var json = {
"title":"No title",
"names":["", "dave", "jeff", "sean", "", ""],
"total_people":3
};
document.getElementById('res').innerHTML = JSON.stringify(json, null, 2);
</script>
</body>
</html>