如何使用Angular/Ionic查詢JSON文件？

Question

我試圖讓Angular查詢JSON文件，而不是在Ionic項目中使用http請求。

我與離子教程工作在這裏找到：https://ccoenraets.github.io/ionic-tutorial/index.html

我已經在整個教程中消失，從而拉開了與我想要的數據源被一個HTTP請求到本地改變我「修修補補」 JSON文件和我已經部分成功。

我在項目中的所有代碼都與本教程中的內容完全匹配，但有以下例外。

在上教程 「模塊4：創建會話服務，」 我改變該塊在步驟3中看出：

angular.module('starter.services', ['ngResource']) 

.factory('Session', function ($resource) { 
    return $resource('http://localhost:5000/sessions/:sessionId'); 
}); 

爲：

angular.module('starter.services', ['ngResource']) 

.factory('Session', function ($resource) { 
    return $resource('data/sessions.json'); 
}); 

要創建JSON文件I接受了本教程中看到的http請求的返回值並將其粘貼到代碼中引用的文件中，並且它是有效的JSON。

現在，當我運行項目（在桌面瀏覽器或模擬器中）時，我能夠看到從JSON中按預期讀取的會話列表。但是，當我點擊/點擊其中一個會話查看詳細信息時，界面顯示但沒有數據。當使用通過http獲取數據的原始代碼時，我可以看到細節。

這是在我的代碼控制器的教程，這大概就是問題所在匹配：

.controller('SessionCtrl', function($scope, $stateParams, Session) { 
    $scope.session = Session.get({sessionId: $stateParams.sessionId}); 
}) 

下面是該視圖的HTML：

<ion-view view-title="Session"> 
    <ion-content> 
    <div class="list card"> 
     <div class="item"> 
     <h3>{{session.time}}</h3> 
     <h2>{{session.title}}</h2> 
     <p>{{session.speaker}}</p> 
     </div> 
     <div class="item item-body"> 
     <p>{{session.description}}</p> 
     </div> 
     <div class="item tabs tabs-secondary tabs-icon-left"> 
     <a class="tab-item"> 
      <i class="icon ion-thumbsup"></i> 
      Like 
     </a> 
     <a class="tab-item"> 
      <i class="icon ion-chatbox"></i> 
      Comment 
     </a> 
     <a class="tab-item"> 
      <i class="icon ion-share"></i> 
      Share 
     </a> 
     </div> 
    </div> 
    </ion-content> 
</ion-view> 

以下是錯誤在控制檯中點擊進入會話詳細視圖後：

Error: [$resource:badcfg] get 
http://errors.angularjs.org/1.3.13/$resource/badcfg?p0=object&p1=array 
    at REGEX_STRING_REGEXP (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8762:12) 
    at d.module.provider.$get.e.(anonymous function).q.then.p.$resolved (http://localhost:8100/lib/ionic/js/angular/angular-resource.min.js:9:330) 
    at processQueue (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21888:27) 
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:21904:27 
    at Scope.$get.Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:23100:28) 
    at Scope.$get.Scope.$digest (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22916:31) 
    at Scope.$get.Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:23205:24) 
    at done (http://localhost:8100/lib/ionic/js/ionic.bundle.js:18358:47) 
    at completeRequest (http://localhost:8100/lib/ionic/js/ionic.bundle.js:18548:7) 
    at XMLHttpRequest.requestLoaded (http://localhost:8100/lib/ionic/js/ionic.bundle.js:18489:9) 

而這裏是在會話列表來自和它也是我想對數據進行查詢數據：

[{"id":0,"title":"Introduction to Ionic","speaker":"CHRISTOPHE COENRAETS","time":"9:40am","room":"Ballroom A","description":"In this session, you'll learn how to build a native-like mobile application using the Ionic Framework, AngularJS, and Cordova."},{"id":1,"title":"AngularJS in 50 Minutes","speaker":"LISA SMITH","time":"10:10am","room":"Ballroom B","description":"In this session, you'll learn everything you need to know to start building next-gen JavaScript applications using AngularJS."},{"id":2,"title":"Contributing to Apache Cordova","speaker":"JOHN SMITH","time":"11:10am","room":"Ballroom A","description":"In this session, John will tell you all you need to know to start contributing to Apache Cordova and become an Open Source Rock Star."},{"id":3,"title":"Mobile Performance Techniques","speaker":"JESSICA WONG","time":"3:10Pm","room":"Ballroom B","description":"In this session, you will learn performance techniques to speed up your mobile application."},{"id":4,"title":"Building Modular Applications","speaker":"LAURA TAYLOR","time":"2:00pm","room":"Ballroom A","description":"Join Laura to learn different approaches to build modular JavaScript applications."}] 

我似乎無法讓我的頭纏着爲什麼改變了http請求到本地文件的查詢不起作用在'SessionCtrl'中執行。

需要進行哪些更改才能使詳細視圖起作用？

---

UPDATE

---

繼從@ErnestoRendon的建議，我想我已經取得了進展。

我改變了工廠看起來像這樣：

angular.module('starter.services', ['ngResource']) 

.factory('Session', function ($resource) { 
     return $resource('data/sessions.json',{ }, { 
     getData: {method:'GET', isArray: false} 
     }); 
}); 

而控制器已經更新到這個樣子：

.controller('SessionCtrl', function($scope, $stateParams, Session) { 

    $scope.session = Session.getData({sessionId : $stateParams.sessionId}); 

    console.log($stateParams.sessionId); // This DOES log the correct option selected from the list 
}) 

當離開IsArray的設置爲false，我得到了相同的對象/當調用getData()時發生數組錯誤。當我將isArray更改爲「true」時，錯誤消失，但沒有數據返回到UI。將該值設置爲「false」時出錯：http://errors.angularjs.org/1.3.13/$resource/badcfg?p0=object&p1=array

在任一情況下（isArray爲「true」或「false」），正確的sessionId將從控制器登錄到控制檯。

因此，儘管事情似乎是更好的設置IsArray的時候爲「true，」我仍然沒有得到數據到用戶界面。

Answer 1

下面是一個從JSON文件加載數據的示例，與您描述的類似。

angular.module('starter.services', ['ngResource']) 

.factory('Session', function ($resource) { 
     return $resource('data/sessions.json',{ }, { 
     getData: {method:'GET', isArray: false} 
     }); 

}); 

注意isArray設置爲false。