jquery - 使用 jQuery 在 DIV 中显示 JSON 对象

Question

有人能告诉我我在这里做错了什么吗？我正在使用 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() 属性，但我一定错过了一些东西。

感谢您的帮助..

Answer 1

这是一个jsfiddle .

查看 JavaScript 的底部，我在其中获取 JSON。然后我使用点表示法遍历对象并获取我需要的信息并将其输出:

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 中使用了数组。