Question

我正在为我的应用程序使用AngularJS和Wikimedia API。我能够很好地查询维基媒体API，我可以看到我希望看到的照片链接隐藏在我的控制器返回的JSON对象中。我无法进入JSON对象以动态提取照片。这就是我所说的。首先，我的控制器：

angular.module('ngApp', [])
  .controller('FirstCtrl', function($scope, $http) {
    $scope.findValue = function(enteredValue){
        $http.get("http://en.wikipedia.org/w/api.php?  action=query&prop=revisions&titles=" + enteredValue + "&prop=pageimages&format=json&pithumbsize=400")
        .then(function (response){
             var json=JSON.stringify(response);
            $scope.page = json;
            alert($scope.page);
        });
        };
})

现在，我的观点：

<img ng-src="{{page.data.query.pages.4856481.thumbnail.source}}">

您可以在视图中看到我在哪里有4856481。这是一个硬连线的wikipage ID。我想要的是解析JSON对象，以便动态地找到图像，而不是通过硬编码。有什么想法吗？

Answer 1

page.data.query.pages似乎是一个对象。您可以轻松使用ngRepeat遍历对象属性（绕过硬连线键）并使用src thumbnail.source打印图像（请参阅＆＃34;迭代对象属性＆＃34;部分了解更多详情）。要仅显示第一个，您可以ng-if图像并检查其索引是否为零（第一项）。

<div ng-repeat="(key, value) in page.data.query.pages">
  <img ng-if="$index == 0" ng-src="{{value.thumbnail.source}}">
</div>

如何使用维基媒体API和AngularJS从维基百科页面显示缩略图？

1 个答案: