Twitter JSON API with jQuery - json

Question

function getUsername()
{
var userName = document.form.screen_name.value;
document.getElementById("display").innerHTML = userName;
var apiName = "https://api.twitter.com/1/users/lookup.json?screen_name=" + userName + "&callback=?";
document.getElementById("display2").innerHTML = apiName;
$(document).ready(function(){
$.getJSON(apiName, function(twitter) {
alert(twitter.name);
$('#showdata').html("<p>item1="+twitter.follwers_count+" item2="+twitter.friends_count+"</p>");
});
});
Javascript code.
<form method="get" action="#" name="form">
Username: <input type="text" name="screen_name" id="username"/>
<input type="submit" value="submit" onclick="getUsername()" />
</form>
<p>Your username is <h2 id="display"></h2></p>
<p>Your api url is <h2 id="display2"></h2></p>
HTML Code
Whats wrong with this code? The alert comes back undefined.
Thanks

Answer 1

The data comes back as an array. You need to get the object at index 0:
function getUsername()
{
var userName = document.form.screen_name.value;
document.getElementById("display").innerHTML = userName;
var apiName = "https://api.twitter.com/1/users/lookup.json?screen_name=" + userName + "&callback=?";
document.getElementById("display2").innerHTML = apiName;
$(document).ready(function(){
$.getJSON(apiName, function(twitter) {
alert(twitter[0].name);
$('#showdata').html("<p>item1=" + twitter[0].follwers_count + " item2=" + twitter[0].friends_count + "</p>");
});
});
}
Of course, you could always just write twitter = twitter[0]; at the start of your function.
Oh, and here's your code jQuery-ified:
function getUsername()
{
var userName = $('[name=screen_name]').val();
$("#display").html(userName);
var apiName = "https://api.twitter.com/1/users/lookup.json?screen_name=" + userName + "&callback=?";
$("#display2").html(apiName);
$(document).ready(function(){
$.getJSON(apiName, function(twitter) {
alert(twitter[0].name);
$('#showdata').html("<p>item1=" + twitter[0].follwers_count + " item2=" + twitter[0].friends_count + "</p>");
});
});
}