2016-03-07 76 views
2

Alrighty,實習項目我正在嘗試爲REST API創建一個簡單的客戶端。當前客戶端正在使用常規的angularJS,但我需要爲此使用Restangular。

我一直在尋找很多東西,嘗試了很多東西,但沒有什麼能夠幫助我做我想做的事,或者理解需要發生的事情。

這是代碼片段,需要變成Restangular

$http.get('/rest/programarticle/', { 
    'format': 'json' 
}).success(function(data, status, headers, config) { 
    $scope.articles = angular.articles = data.results; 
}); 

該拾起其中包含一些元數據,藏漢作爲數組JSON數據(結果):

{ 
    "count": 3, 
    "next": null, 
    "previous": null, 
    "results": [ 
     { 
      "id": 100, 
      "catalog": 7, 
      "catalog_alias": "placeHolder", 
      "program": 7, 
      "name": "placeHolder" 
     }, 
     { 
      "id": 92, 
      "catalog": 6, 
      "catalog_alias": "placeHolder", 
      "program": 6, 
      "name": "placeHolder" 
     }, 
     { 
      "id": 84, 
      "catalog": 5, 
      "catalog_alias": "string", 
      "program": 5, 
      "name": "placeHolder" 
     } 
    ] 
} 

我有我的baseUrl配置正確,我試了一下:

var testArticles = Restangular.all('programarticle').getList(); 
console.log(testArticles); 

使用下面的Resp onseInterceptor:

RestangularProvider.addResponseInterceptor(function(data, operation, what, url, response, deferred) { 
    var extractedData; 
    if (operation === "getList") { 
     extractedData = data.results; 
     extractedData.count = data.count; 
     extractedData.next = data.next; 
     extractedData.previous = data.previous; 
    } else { 
     extractedData = data.data; 
    } 
    return extractedData; 
}); 

但是,這仍然會導致一些我可以在控制檯不起作用:

Promise {$$state: Object, restangularCollection: true, $object: Array[0]} 

打開時顯示以下內容:

$$state: Object 
$object: Array[7] 
call: wrapper() 
get: wrapper() 
push: wrapper() 
restangularCollection: true 
__proto__: Promise 

它確實表明了數組($對象),但我無法達到它使用

console.log(testArticles.$object); 

我應該使用.get()而不是getList()嗎?如果是這樣,我該如何正確使用它?

謝謝你的時間,請建議,我仍然是一個初學者。

+1

您是否配置Restangular以將'/ rest'基礎添加到API調用中? 爲什麼從攔截器返回的數據不是您可以使用的東西?你看到了什麼數據而不是預期的數據? –

+0

@EzequielMuns是的,我配置了基礎URL,我將很快編輯我的文章,以便它包含您剛纔調用的東西:) –

回答

1

什麼get/getList功能從restangular返回實際上是承諾,而不是自己檢索的JSON對象。承諾是一種通過更易於管理的界面來抽象異步調用的方式。他們代表着未來的預期結果。

你需要知道的是,獲得承諾的實際結果,則必須使用then函數添加一個回調,像這樣:

Restangular.all('programarticle').getList().then(function (articles) { 
    $scope.articles = articles; 
}); 

瞭解更多關於承諾here

+0

謝謝!這已經返回了一些對控制檯更有用的東西。我曾閱讀過這篇文章,但作爲磨砂膏,我仍然不知道如何**使用這個承諾和其中的數據。我能否現在重複文章中的文章?還是我需要別的東西? –

+0

應該能夠在返回的articles數組上進行'ng-repeat'。 –

+0

非常感謝你的好先生!我現在應該終於能夠走了。 –