抓取远程JSON提要并显示一些值

时间:2011-07-08 20:42:27

标签: jquery web-services json github-api

我想从https://api.github.com/users/mojombo获取以下JSON Feed:

{
    "public_repos": 52,
    "type": "User",
    "bio": "",
    "url": "https://api.github.com/users/mojombo",
    "avatar_url": "https://secure.gravatar.com/avatar
        /25c7c18223fb42a4c6ae1c8db6f50f9b?d=https:  
        //gs1.wac.edgecastcdn.net/80460E/assets%2Fimages%2Fgravatars%2Fgravatar-140.png",
    "login": "mojombo",
    "public_gists": 66,
    "following": 11,
    "created_at": "2007-10-20T05:24:19Z",
    "email": "tom@github.com",
    "followers": 2252,
    "company": "GitHub, Inc.",
    "blog": "http://tom.preston-werner.com",
    "name": "Tom Preston-Werner",
    "location": "San Francisco",
    "html_url": "https://github.com/mojombo",
    "hireable": true,
    "id": 1

}

我有以下HTML,我希望在页面加载后填充email的值:

<div id='github-mojombo'></div>

我无法让JQuery按照自己的意愿行事。不可否认,我并不完全理解回调和/或对JQuery有很多经验。在下面的示例中,user_email未定义。我究竟做错了什么?如何更改它以使其在这些DIV中插入电子邮件?

<script>
    jQuery(document).ready(function($) {
        $.getJSON("https://api.github.com/users/mojombo?callback=?", 
            function(data) {
            var user_data = data;
        var user_email = user_data.email;
        alert('Got email ' + user_email);
        });
    });
</script>

4 个答案:

答案 0 :(得分:1)

在尝试访问响应的属性之前,我会先将响应解析为JSON:

var user_data = JSON.parse(data)

答案 1 :(得分:1)

jQuery(document).ready(function($){
  $.getJSON("https://api.github.com/users/mojombo?callback=?", function(data){
    var user_email = data.data.email; //note the data.data
    alert('Got email ' + user_email);
  });
});

答案 2 :(得分:1)

您可以使用以下

function(response)

var List = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d; $.each(List, function() { this["public_repos"]; });

如果不是0,你必须检查响应的长度然后你可以循环使用关键字this [“columnname”]

来获得你的结果

希望它会对你有所帮助。

答案 3 :(得分:0)

你不能跨域进行AJAX请求(getJSON本质上只是一个包装器),浏览器不允许这样做。这就是回调的来源。您可以做的是使用jQuery的getScript函数将脚本标记写入页面。回调将包装JSON返回,以便脚本标记的内容是您的函数,JSON作为参数传递。在您的函数中,然后处理JSON。代码看起来像这样:

function myCallback(jsonData)
{
    // do something with the JSON

    var user_data = JSON.parse(data);
    var user_email = user_data.email;
    alert('Got email ' + user_email);
}

jQuery(document).ready(function($){
    $.getScript("https://api.github.com/users/mojombo?callback=myCallback");
});

https://api.github.com/users/mojombo?callback=myCallback的输出类似于:

myCallback('{"name":"foo", "email":"foo@bar.com", ...rest of the json...}');