Как отобразить уменьшенное изображение со страницы Википедии с помощью API Викимедиа и AngularJS?

Question

Как отобразить уменьшенное изображение со страницы Википедии с помощью API Викимедиа и AngularJS?

0

Я использую AngularJS и 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. Вместо этого я должен анализировать объект JSON, чтобы изображения можно находить динамически, а не жестким кодированием. Есть предположения?

mthrasher33 03 янв. 2016, в 02:52

Источник

Теги:

javascript

angularjs

json

1 ответ

Ещё вопросы

Joseph · Answer 1 · 2016-01-02T23-49-00.000Z

Похоже, что page.data.query.pages - это объект. Вы можете легко использовать ngRepeat для ngRepeat свойств объекта (минуя жесткий ключ) и распечатать изображение с помощью src thumbnail.source (подробнее см. Раздел "Итерация над объектами"). Чтобы показать только первое, вы можете ng-if изображение и проверить, равен ли его индекс нулю (первый элемент).

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

Спасибо за ответ, Джозеф, но это не работает для меня.