Question

我试图让Angular查询JSON文件，而不是在Ionic项目中使用http请求。

我正在使用此处的Ionic教程：https://ccoenraets.github.io/ionic-tutorial/index.html

我已经完成了整个教程并且正在修补＆＃34;从我开始想要将数据源从http请求更改为本地JSON文件并且我已经部分成功。

项目中的所有代码都与本教程中的内容完全匹配，但有以下异常。

在＆＃34;模块4：创建会话服务的教程中，＆＃34;我改变了步骤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文件，我获取了教程中看到的http请求的返回值，并将其粘贴到代码中引用的文件中，它是有效的JSON。

现在，当我运行项目时（在桌面浏览器或模拟器中），我能够看到按预期从JSON读取的会话列表。但是，当我单击/点击其中一个会话以查看详细信息时，会显示UI但没有数据。当使用通过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请求更改为本地文件不适用于在＆＃39; SessionCtrl＆＃39;中执行的查询。

需要进行哪些更改才能使详细视图生效？

更新

根据@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更改为＆＃34; true＆＃34;错误消失但没有数据返回到UI。将该值设置为＆＃34; false＆＃34;：http://errors.angularjs.org/1.3.13/$resource/badcfg?p0=object&p1=array

时出错

在任一情况下（isArray为＆＃34; true＆＃34;或＆＃34; false＆＃34;）正确的sessionId将从控制器登录到控制台。

因此，当将isArray设置为＆＃34; true时，事情看起来会更好，＆＃34;我还没有将数据导入用户界面。

Answer 1

这是一个从类似于您描述的JSON文件加载数据的示例。

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

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

});

请注意isArray设置为false。

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

1 个答案: