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

问题描述

问题

我使用离子标签模板创建我的第一个项目，离子型框架，这是该项目的一个例子：
（ https://github.com/driftyco/ionic-starter-tabs ）
正如我们在这个项目中看到我们得到了好友列表，并从services.js文件中创建一个数组列表，一个朋友的细节，但我想从这样的（例如的 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).

问

我怎样才能从Web服务器拉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.chats = response;
  })
})

范围添加到View

此将数据绑定到的范围。还有的将其提供给视图。

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

最后，你将能够通过$范围将数据传送到视图
我创建了一个列表这里的一切，你从朋友得到一个不错的侧SWIP添加更多或删除得到朋友们。

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>

免责声明

这是一些code，我不得不previously写的，我修改了一点，以配合您的问题。我还没有遇到这个版本完全相同，但我完全版能正常工作。

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.

如果您希望看到完整的code请随时检查我的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

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