如何使用Wikimedia API和AngularJS显示维基百科页面的缩略图

How do I display the thumbnail picture from a Wikipedia page using the Wikimedia API and AngularJS?

本文关键字：百科 略图 API Wikimedia 何使用 AngularJS 显示      更新时间：2023-09-26

我的应用程序使用AngularJS和Wikimedia API。我可以很好地查询Wikimedia 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对象，这样就可以动态地找到图像，而不是通过硬编码。有什么想法吗？

看起来page.data.query.pages是一个对象。您可以很容易地使用ngRepeat循环对象属性（绕过硬连线键），并使用thumbnail.source的src打印图像（有关更多详细信息，请参阅"循环对象属性"部分）。要只显示第一项，可以ng-if图像并检查其索引是否为零（第一项）。

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