在Angular.js中使用來自API調用的數據

在通過FreeCodeCamp向CodeSchool介紹Angular.js之後，我編寫了一個zipline，我必須在Camper News上設置風格化故事。基本上，我打電話給API並需要顯示結果。在Angular.js中使用來自API調用的數據

但是，我很難用angular.js顯示我的API調用結果。我在網上和StackOverflow上搜索，找不到解決我的問題的方法。

這是我app.js：

(function() { 
    var app = angular.module('camperNews', []); 

    app.controller('StoryController', ['$http', function($http) { 
    var story = this; 
    story.news = []; 
    $http.get('http://www.freecodecamp.com/news/hot'). 
    then(function(response) { 
     story.news = response; 
    }, function(err) { 
     console.error('ERR', err); 
    }); 
    }]); 
})();

而且我HTML：

<body ng-controller="StoryController as story"> 
    <div id="container" class="text-center"> 
     <div id="posts" class="text-center" ng-repeat="new in story.news"> 
      <div class="post"> 
       <div class="author"> 
        <a href="{{new.link}}" target="_blank"><img class="author-picture" src="{{new.author.picture}}"></a> 
       </div> 
      </div> 
     </div> 
    </div> 
    </body>

我看着在控制檯，我的電話是返回的東西，問題是明顯我的HTML和我的經驗不足造成的。我會幫助找到一個解決方案或提示如何解決我的問題。

預先感謝您。

來源

2015-09-29 Jim P.

嘗試在'.then'塊使用'story.news = response.data'。 – Claies

您需要更改<div id="posts" class="text-center" ng-repeat="new in story.news">到<div id="posts" class="text-center" ng-repeat="new in story.news.data">。

或者你可以在你的控制器改變story.news = response;到story.news = response.data;

來源

2015-09-29 01:55:38

使用then()與$http回調響應參數不僅僅是你的數據更復雜的對象......數據是對象的屬性：

$http.get('http://www.freecodecamp.com/news/hot').then(function(response) {  
    story.news = response.data; 
}, function(err) { 
    console.error('ERR', err); 
});

來源

2015-09-29 01:55:02 charlietfl

感謝您的解釋。 –

嘗試不運行它（函數（）{}）（）

2.It好像你正在使用$ http.get使用http ajax工具訪問api服務器，但您更願意使用api客戶端作爲角提供程序的一部分。

$資源是這種用法正好做了一個供應商..

這裏是工廠文件（news.factory.js）

angular 
      .module('camperNews') 
      .factory('$news',newsFactory); 

//Injects strings to function dep. 
newsFactory.$injector('$resource'); 

newsFactory($resource){ 

var baseUrl = 'http://www.freecodecamp.com/news'; 

return 
$resource(baseUrl+'/hot', 
    {/*params dictionary*/}, 
    /*This is get/post/delete/put and so on customizations..*/ 
    {get: {method:'GET', params:{}, isArray:true /*i think you get a list..*/} 
    );    
}

這裏是我的app.js：

angular.module('camperNews', ['$news'/*TODO:Add ng-resource*/]); 

    angular 
     .module('camperNews') 
     .controller('StoryController', ['$news', function($news) { 
    var story = this; 
    story.news = []; 

/*Will load a resource, with the array 
*and $resolved(bool) and $promise(promise type) and etc.. 
*/ 
    story.news = $news.get(); 
    }]);

而我的HTML：

<body ng-controller="StoryController as story"> 
    <div id="container" class="text-center"> 
     <div id="posts" class="text-center" ng-repeat="new in story.news"> 
      <div class="post"> 
       <div class="author"> 
        <a href="{{new.link}}" target="_blank"><img class="author-picture" src="{{new.author.picture}}"></a> 
       </div> 
      </div> 
     </div> 
    </div> 
    </body>

來源

2015-09-29 02:04:07

爲什麼不使用$ scope？而不是var story = this;寫$ scope.story = {};和$ scope.story.news = response;並寫入ng-controller =「statecontroller」。

在這種情況下，$資源服務

來源

2015-09-29 02:07:43 krishna

在控制器中使用'this''在控制器中使用'controllerAs'別名和語法 – charlietfl

Thanks @charlietfl – krishna