使用 AngularJS 从 IONIC 中的 json 文件中获取数据 [英] Getting data from a json file in IONIC using AngularJS

问题描述

问题

我使用离子标签模板创建了我的第一个带有离子框架的项目，这是该项目的一个示例:(https://github.com/driftyco/ionic-starter-tabs)正如我们在这个项目中看到的，我们从在 services.js 文件中创建的数组列表中获得一个朋友列表和一个朋友详细信息，但我想从这样的 json 文件中获取这个列表和项目详细信息(示例 https://friends.json).

I created my first project with ionic framework using ionic tabs template and this is an example of the project : (https://github.com/driftyco/ionic-starter-tabs) As we see in this project we get a list of friends and a friend detail from an array list created in the services.js file, but I want to get this list and items detail from a json file like this(example https://friends.json).

问题

如何将 JSON 数据从网络服务器拉取到我的应用程序?

How can I Pull JSON data from a web server down to my app??

推荐答案

services.js 中的工厂

从工厂开始，但用你的替换我的网址.

Start off with a factory but replace my url wit yours.

.factory('Friends', function ($http, $rootScope, $stateParams) {

  return {
    all: function () {
      return $http.get('https://friends.json/all', { params: { user_id: $rootScope.session } })
    },
    get: function () {
      return $http.get('https://friends.json/getOne', { params: { user_id: $rootScope.session, chat_id: $stateParams.idchat } })
    },
    add: function (id) {
      return $http.get('https://friends.json/new', { params: {idfriends:id}})
    }
  };
});

controllers.js 中的控制器

然后制作一个这样的控制器.这是您实例化工厂以获取数据的时间.

Then make a controller like this. This is when you instantiate the factory to get your data.

.controller('FirendsCtrl', function ($scope, Friends) {

  Friends.all().success(function (response) {
    $scope.friends = response;
  })
})

范围添加到视图

这会将数据绑定到作用域.并在那里使其可用于视图.

This will bind the data to the scope. And there for make it available to the view.

最后，您将能够通过 $scope 将数据带到视图中我在此处创建了一个列表，其中列出了您从中获得的所有朋友，只需轻轻滑动即可添加或删除.

Finally you will be able to bring the data to the view via $scope I have created a list here of all the friends that you get from get friend with a nice side swip to add more or delete.

<ion-view view-title="Contacts">
  <ion-content>
  <ion-list>
      <ion-item class="item-icon-right" ng-repeat="data in friends">
          <h1>{{ data.username }}</h1>
          <p>{{ data.friendNumber}}</p>
          <i class="icon ion-chevron-left icon-accessory"></i>
          <ion-option-button class="button-positive" ng-click="viewFriend(viewFriend(data.idfriends))">View Friend</ion-option-button>
          <ion-option-button class="button-assertive" ng-click="deleteFriend(remove(data.idfriends))">Delete</ion-option-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

免责声明

这是我之前编写的一些代码，我对其进行了一些修改以适合您的问题.我还没有完全运行这个版本，但我的完整版本运行良好.

this is some code that I had previously written, I've modified it a bit to fit with your question. I have not ran this version exactly but my full version works fine.

如果您想查看完整代码，请随时查看我的 github 存储库 https://github.com/joeLloyd/Scripto5000

if you wish to see the full code please feel free to check out my github repo https://github.com/joeLloyd/Scripto5000

这篇关于使用 AngularJS 从 IONIC 中的 json 文件中获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！