Как вызвать данные JSON через URL-адрес в Angular JS
Практикую веб-API через JSON.
В URL-адресе, который я использую (https://www.ebi.ac.uk/europepmc/webservices/rest/search?query=malaria&format=json), есть такие поля, как ID, titles и т. д. Я хочу вызвать заголовок и отобразить его. Вот мой код:
app.controller("europepmc", ['$scope', '$http', function($scope, $http) {
$http.get('https://www.ebi.ac.uk/europepmc/webservices/rest/search?query=malaria&format=json')
.success(function(data) {
$scope.magazine = data;
});
}]);
И мой контроллер привязывается к дате html следующим образом:
<div ng-controller = "europepmc">
<p>The magazine title is is {{magazine.title}}</p>
</div>
После успешной разработки этого кода я не могу получить титул.
Ответы 3
ваш объект Json имеет свойство title, но немного глубже:
object.resultList.result.0-24.title
чтобы лучше рассмотреть, вставьте сюда свой Json:
и проверьте вкладку просмотра.
У полученного вами JSON есть дополнительные свойства, которые вы должны пройти, прежде чем вы сможете получить доступ к title из результатов. Вы должны сначала расширить его с помощью .resultList.result. Затем отобразите этот массив с помощью ng-repeat.
Вот демонстрация:
var app = angular.module("pmc", []);
app.controller("europepmc", ['$scope', '$http', function($scope, $http) {
$http.get('https://www.ebi.ac.uk/europepmc/webservices/rest/search?query=malaria&format=json')
.then(function(res) {
$scope.magazines = res.data.resultList.result;
});
}]);<!DOCTYPE html>
<html>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app = "pmc" ng-controller = "europepmc">
<div ng-repeat = "magazine in magazines">
{{magazine.title}}
<hr>
</div>
</div>
</body>
</html>Вот демонстрация для просмотра всего ответа:
var app = angular.module("pmc", []);
app.controller("europepmc", ['$scope', '$http', function($scope, $http) {
$http.get('https://www.ebi.ac.uk/europepmc/webservices/rest/search?query=malaria&format=json')
.then(function(res) {
$scope.magazine = res.data;
});
}]);<!DOCTYPE html>
<html>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app = "pmc" ng-controller = "europepmc">
<pre>
{{magazine | json}}
</pre>
</div>
</body>
</html>// В коде контроллера Angular var app = angular.module ("мое приложение", []);
app.controller ("europepmc", ['$ scope', '$ http', function ($ scope, $ http) {
$http({
method: 'GET',
dataType: 'json',
url: 'https://www.ebi.ac.uk/europepmc/webservices/rest/search?query=malaria&format=json',
}).then(function (success) {
$scope.magazineList = success.data.resultList.result;
}, function (error) {
alert(error);
});
}]);
// Код HTML-страницы Используйте ng-repeat для прокрутки mg в magazineList, а затем используйте mg.title
ваш magazine не определен, так как вы заполняете только magazineList
@LoneWolf отлично отображается в консоли, но я хочу отображать только заголовки на веб-странице