CODEWITHSUNDEEP
angularjsapi
Rinku Malik
Rinku Malik

Reputation: 71

Retrieve Data From Api Using Angular

Here is my api from which i want to parse the first author name.

{
  status: "ok",
  source: "the-next-web",
  sortBy: "latest",
  articles: - [
    {
      author: "Napier Lopez",
      title: "Microsoft reveals the first Cortana-powered Amazon Echo competitor",
      description: "We first got wind of a Cortana-powered speaker was on the way back in December, but now it's finally here. Microsoft and Harmon Kardon today revealed the 'Invoke,' the first Amazon ...",
      url: "https://thenextweb.com/microsoft/2017/05/08/microsoft-reveals-first-cortana-powered-amazon-echo-competitor/",
      urlToImage: "https://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2017/05/Harmon-Kardon-Invoke-Cortana-Speaker-Microsoft.jpg",
      publishedAt: "2017-05-08T18:35:18Z"
    },
    {
      author: "Rachel Kaser",
      title: "Facebook fights fake news in UK with newspaper ads and account purges",
      description: "As the UK election draws near, Facebook is cleaning house. The social media giant is taking two major steps to combat false news at a critical moment: deleting accounts and buying ...",
      url: "https://thenextweb.com/facebook/2017/05/08/facebook-fights-fake-news-uk-newspaper-ads-account-purges/",
      urlToImage: "https://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2017/04/Screen-Shot-2017-04-14-at-14.24.46.jpg",
      publishedAt: "2017-05-08T18:03:29Z"
    }
  ]
}

I have stored all this data in $scope.content and retrieving the first author name by this

{{content.author}}

But it is not showing anything. Can u tell me why is that and how to fix it.?

Upvotes: 2

Views: 74

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222722

You should do a ng-repeat over content.articles

<tr ng-repeat="x in content.articles">
    <td>{{ x.author }}</td>
    <td>{{ x.title }}</td>
</tr>

DEMO 

var app = angular.module("myApp", []);
app.controller("PatientsController", function($scope) { 
 $scope.content = {
"status": "ok",
"source": "the-next-web",
"sortBy": "latest",
"articles":  [
 {
"author": "Napier Lopez",
"title": "Microsoft reveals the first Cortana-powered Amazon Echo competitor",
"description": "We first got wind of a Cortana-powered speaker was on the way back in December, but now it's finally here. Microsoft and Harmon Kardon today revealed the 'Invoke,' the first Amazon ...",
"url": "https://thenextweb.com/microsoft/2017/05/08/microsoft-reveals-first-cortana-powered-amazon-echo-competitor/",
"urlToImage": "https://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2017/05/Harmon-Kardon-Invoke-Cortana-Speaker-Microsoft.jpg",
"publishedAt": "2017-05-08T18:35:18Z"
},
 {
"author": "Rachel Kaser",
"title": "Facebook fights fake news in UK with newspaper ads and account purges",
"description": "As the UK election draws near, Facebook is cleaning house. The social media giant is taking two major steps to combat false news at a critical moment: deleting accounts and buying ...",
"url": "https://thenextweb.com/facebook/2017/05/08/facebook-fights-fake-news-uk-newspaper-ads-account-purges/",
"urlToImage": "https://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2017/04/Screen-Shot-2017-04-14-at-14.24.46.jpg",
"publishedAt": "2017-05-08T18:03:29Z"
}
]};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp" ng-controller="PatientsController">
<table>
  <tr ng-repeat="x in content.articles">
    <td>{{ x.author }}</td>
    <td>{{ x.title }}</td>
  </tr>
</table>
</body>
</html>

Upvotes: 1

Related Questions