Retrieve Data From Api Using Angular

Question

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.?

Are you able to access any other params of the scope besides {{content.author}} using the "content" prefix? — Basilf
– Basilf, Commented May 8, 2017 at 17:45

Sajeetharan · Accepted Answer · 2017-05-08 17:45:05Z

1

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>

answered May 8, 2017 at 17:45

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rinku Malik Over a year ago

kk got this thanx

Sajeetharan Over a year ago

@RinkuMalik check the demo

Collectives™ on Stack Overflow

Retrieve Data From Api Using Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related