CODEWITHSUNDEEP
htmlangularjsjson
Roja Rose
Roja Rose

Reputation: 1

how to call JSON data through URL in Angular JS

I'm practicing Web API through JSON.

In the URL I am using (https://www.ebi.ac.uk/europepmc/webservices/rest/search?query=malaria&format=json), there are fields like ID, titles etc. I want to call title and display it. Below is my code so far:

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;
    });
}]);

And my controller is binding with html date in the following way:

<div ng-controller="europepmc">
  <p>The magazine title is  is {{magazine.title}}</p>
</div>

After successfully developing this code I'm not able to get the title.

Upvotes: 0

Views: 1388

Answers (3)

Hanmant Rachmale
Hanmant Rachmale

Reputation: 45

//In Angular Controller Code var app = angular.module("myApp", []);

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 Page Code Use ng-repeat to loop through mg in magazineList -- and then use mg.title

Upvotes: 0

Aleksey Solovey
Aleksey Solovey

Reputation: 4191

The JSON you are receiving has more properties for you to go through before you can reach title from results. You should extent it with .resultList.result first. Then display this array with ng-repeat.

Here is a demo:

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>

Here is a demo to view the entire response:

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>

Upvotes: 4

Jose Georges
Jose Georges

Reputation: 805

your Json object does have the title property, but a bit deeper:

object.resultList.result.0-24.title

to look at it better, paste your Json here:

http://jsonviewer.stack.hu/

and check the viewer tab.

Upvotes: 0

Related Questions