使用jQuery在DIV中显示JSON对象

时间:2012-07-03 16:41:59

标签: jquery json

有谁能告诉我这里做错了什么?我正在使用ESPN API检索JSON对象,但是我无法在HTML页面上的DIV中显示它。

我的jQuery

$.ajax({
    type: "GET",
    dataType: "json",
    data: " ",
    url: 'http://api.espn.com/v1/sports/basketball/nba/teams/16?enable=stats,leaders&seasontype=2&_accept=text/json&apikey=XXXXX2457896',
    success: function(data) {
      $('#result').html(data);
      console.log('Load was performed.');
    }
});

我的退回JSON

{
  "sports": [
    {
      "name": "basketball",
      "id": 40,
      "leagues": [
        {
          "id": 46,
          "groupId": 7,
          "name": "National Basketball Assoc.",
          "abbreviation": "NBA",
          "teams": [
            {
              "id": 16,
              "location": "Minnesota",
              "name": "Timberwolves",
              "abbreviation": "MIN",
              "color": "0E3764",
              "links": {
                "api": {
                  "teams": {
                    "href": "http://api.espn.com/v1/sports/basketball/nba/teams/16"
                  },
                  "news": {
                    "href": "http://api.espn.com/v1/sports/basketball/nba/teams/16/news"
                  },
                  "notes": {
                    "href": "http://api.espn.com/v1/sports/basketball/nba/teams/16/news/notes"
                  }
                },
                "web": {
                  "teams": {
                    "href": "http://espn.go.com/nba/team/_/name/min/minnesota-timberwolves?ex_cid=espnapi_public"
                  }
                },
                "mobile": {
                  "teams": {
                    "href": "http://m.espn.go.com/nba/clubhouse?teamId=16&ex_cid=espnapi_public"
                  }
                }
              }
            }
          ]
        }
      ]
    }
  ],
  "resultsOffset": 0,
  "resultsLimit": 50,
  "resultsCount": 1,
  "timestamp": "2012-07-03T16:33:07Z",
  "status": "success"
}

请求正常,一切正常。我只是无法弄清楚如何让数据显示在我的HTML页面上。我想我可以使用.html()属性,但我必须遗漏一些东西。

感谢您的帮助..

3 个答案:

答案 0 :(得分:5)

这是jsfiddle

查看我获得JSON的JavaScript底部。然后我使用点符号遍历对象并获取我需要的信息并输出它:

data.sports[0].leagues[0].teams[0].links.api这是你需要做的事情

$.getJSON('/sports', function(data) {

    var links = data.sports[0].leagues[0].teams[0].links.api

    for(var key in links) {

        $('body').append('<a href="'+ links[key].href +'">'+ links[key].href +'</a><br />');          

    }                 

});

使用了[0],因为您在JSON中使用了数组。

答案 1 :(得分:4)

将json包装在<pre></pre>块中,然后将其输出到页面

答案 2 :(得分:0)

data.sports[0].leagues[0].teams[0].links.api

这是你需要做的事情

$.getJSON('/sports', function(data) {

    var links = data.sports[0].leagues[0].teams[0].links.api

    for(var key in links) {

        $('body').append('<a href="'+ links[key].href +'">'+ links[key].href +'</a><br />');          

    }
}