使用Angular从Api中检索数据

这里是我的api，我想从中解析第一个作者的名字。使用Angular从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" 
    } 
    ] 
}

我已经通过这个

{{content.author}}

存储在$ scope.content所有这些数据和检索第一作者的名字，但它没有显示任何东西。你能告诉我为什么，以及如何解决它。

来源

2017-05-08 Rinku Malik

您能够访问范围中的任何其他PARAMS除了{{内容。作者}}使用“内容”前缀？ – Basilf

你应该做一个NG重复过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>

来源

2017-05-08 17:45:05 Sajeetharan

kk得到了这个thanx –

@RinkuMalik检查演示 – Sajeetharan

@RinkuMalik标记作为答案，如果这有帮助 – Sajeetharan

使用Angular从Api中检索数据

回答

相关问题