Question

我是一名新手，目前正在使用ESPN API，在查询API之后，我希望它能够显示故事的标题，链接和图像。我只能显示标题，请问如何循环显示图像及其链接？

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Work</title>

    <script src="jquery-1.9.1.js"></script>
  </head>
  <body>
    <script>
    (function() {
      var espnAPI = "http://api.espn.com/v1/sports/soccer/news/headlines/top/?apikey=*************&callback=?";
      $.getJSON( espnAPI, {

        format: "json"
      })
        .done(function( data ) {
          var ol = $("<ol/>");
        $.each( data.headlines, function() {
      var h2 = $( "<h2/>" ).text(this.headline);

      ol.append(h2)
      });
      $("body").append(ol);
      });
  })();

  </script>

  </body>
  </html>

这是我从chrome中的开发人员工具获得的响应主体的一部分;

{
"timestamp": "2013-10-21T08:43:40Z",
"resultsOffset": 0,
"status": "success",
"resultsLimit": 10,
"resultsCount": 43,
"headlines": [{
    "headline": "Townsend stars as Spurs beat Villa",
    "keywords": [],
    "lastModified": "2013-10-20T21:15:25Z",
    "audio": [],
    "premium": false,
    "mobileStory": "",
    "links": {
        "api": {
            "news": {
                "href": "http://api.espn.com/v1/sports/news/1589010?region=GB"
            }
        },
        "web": {
            "href": "http://espnfc.com/uk/en/report/367415/townsend-stars-spurs-beat-villa?ex_cid=espnapi_public"
        },
        "mobile": {
            "href": "http://m.espn.go.com/soccer/gamecast?gameId=367415&lang=EN&ex_cid=espnapi_public"
        }
    },
    "type": "snReport",
    "related": [],
    "id": 1589010,
    "story": "",
    "linkText": "Aston Villa 0-2 Spurs: Townsend stars",
    "images": [{
        "height": 360,
        "alt": "Andros Townsend is mobbed after his cross inadvertently gave Spurs the lead at Aston Villa.",
        "width": 640,
        "name": "Spurs celeb Andros Townsend goal v avfc 20131020 [640x360]",
        "caption": "Andros Townsend is mobbed after his cross inadvertently gave Spurs the lead at Aston Villa.",
        "type": "inline",
        "url": "http://espnfc.com/design05/images/2013/1020/spurscelebandrostownsendgoalvavfc20131020_640x360.jpg"
    }],
    "categories": [{
        "description": "Aston Villa",
        "type": "team",
        "sportId": 600,
        "teamId": 362,
        "team": {
            "id": 362,
            "description": "Aston Villa",
            "links": {
                "api": {
                    "teams": {
                        "href": "http://api.espn.com/v1/sports/soccer/teams/362"
                    }
                },
                "web": {
                    "teams": {
                        "href": "http://espnfc.com/team/_/id/362/aston-villa?ex_cid=espnapi_public"
                    }
                },
                "mobile": {
                    "teams": {
                        "href": "http://m.espn.go.com/soccer/clubhouse?teamId=362&ex_cid=espnapi_public"
                    }
                }
            }
        },
        "uid": "s:600"
    }, {
        "description": "Tottenham Hotspur",
        "type": "team",
        "sportId": 600,
        "teamId": 367,
        "team": {
            "id": 367,
            "description": "Tottenham Hotspur",
            "links": {
                "api": {
                    "teams": {
                        "href": "http://api.espn.com/v1/sports/soccer/teams/367"
                    }
                },
                "web": {
                    "teams": {
                        "href": "http://espnfc.com/team/_/id/367/tottenham-hotspur?ex_cid=espnapi_public"
                    }
                },
                "mobile": {
                    "teams": {
                        "href": "http://m.espn.go.com/soccer/clubhouse?teamId=367&ex_cid=espnapi_public"
                    }
                }
            }
        },
        "uid": "s:600"
    }],
    "published": "2013-10-20T17:12:43Z",
    "video": []
},

Answer 1

在你完成的功能中试试这个

.done(function( data ) {

data=JSON.parse(data)

//put your code
})

希望这会有所帮助...

Answer 2

您已经在此代码中完成了大部分操作：

$.each(data.headlines, function () {
    var h2 = $("<h2/>").text(this.headline);
    ol.append(h2)
});

this是对headlines数组中当前对象的引用，除headline属性外，它还有images属性（这是一个数组））。您只需要另一个嵌套循环来迭代该数组：

$.each(data.headlines, function () {
    var h2 = $("<h2/>").text(this.headline);
    ol.append(h2)
    $.each(this.images, function() {
        // do something with each of the images, using this to refer to it
        // that's a different this to the one before
    });
});

使用ESPN API，我该如何解析这个JSON？

2 个答案: