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