how to call JSON data through URL in Angular JS

Question

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.

@LoneWolf fine it showing in console but I want to display only titles in the webpage — Roja Rose
– Roja Rose, Commented Jun 7, 2018 at 12:56

Aleksey Solovey · Accepted Answer · 2018-06-07 12:59:22Z

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>

Jose Georges · Accepted Answer · 2018-06-07 12:56:43Z

0

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.

answered Jun 7, 2018 at 12:56

Jose Georges

8209 silver badges20 bronze badges

Comments

Hanmant Rachmale · Accepted Answer · 2018-06-07 13:18:23Z

0

//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

edited Jun 7, 2018 at 13:18

answered Jun 7, 2018 at 13:15

Hanmant Rachmale

454 bronze badges

1 Comment

Aleksey Solovey Over a year ago

your magazine is undefined, since you are populating only magazineList

Collectives™ on Stack Overflow

how to call JSON data through URL in Angular JS

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related