使用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中檢索數據

回答

相關問題