Question

这是我想要解析第一个作者姓名的api。

{
  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"
    }
  ]
}

我已将所有这些数据存储在$ scope.content中并通过此

检索第一个作者名称

{{content.author}}

但它没有显示任何东西。你能告诉我为什么会这样以及如何解决它。？

Answer 1

您应该对 content.articles

进行ng-repeat

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

<强>样本

＆＃13;

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

＆＃13;

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

＆＃13;

使用Angular从Api检索数据

1 个答案: