Ionic Framework with External JSON File


#1

i have a problem that i don’t know how to solve, i have an IONIC Tabs Template and want to add an external JSON File

This is my app.js file:

.state('tab.chats', {
      url: '/chats',
      views: {
        'tab-friends': {
          templateUrl: 'templates/tab-chats.html',
          controller: 'ChatsCtrl'
        }
      }
    })
    .state('tab.chats-detail', {
      url: '/chats/:chatsid',
      views: {
        'tab-friends': {
          templateUrl: 'templates/chats-detail.html',
          controller: 'ChatsDetailCtrl'
        }
      }
    })

This is my controllers.js file

.controller('ChatsCtrl', function($scope, Chats) {
  $scope.friends = Chats.all();
})

.controller('ChatsDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.friend = Chats.get($stateParams.chatsid);
})

This is my services.js file, that access a JSON file:

.factory('Chats', function($http) {
var chats = [];
  return {
    all: function(){
      return $http.get("http://ataquepropaganda.com.br/equipos.json").then(function(response){
        chats = response.data;
        console.log(chats );
        return chats ;
      });
    },
    get: function(chatsid) {
       for (var i = 0; i < chats.length; i++) {
        if (chats[i].id === parseInt(chatsid)) {
          return chats[i];
        }
      }
      return null;
    }
  }
});

And finally my tabs-chats.html template:

    <ion-view view-title="Chats">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chats.id}}">
        <!--img ng-src="{{chat.face}}"-->
        <h2>{{chats.name}}</h2>
        <p>{{chats.bio}}</p>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

#2

You need to specify the error message you are getting. There’s little we can do without that. If you are using chrome hit CTRL+SHIFT+J to bring up the console log. Any errors listed in red you should paste here:

If you are also testing from your computer (localhost) to an online JSON, there is the issue of cross domain access that browsers would deny by default, but we won’t know for sure till we see your error message.


#3

Thank you for trying to help! It appears this mistake! follows the image below

XMLHttpRequest cannot load http://ataquepropaganda.com.br/equipos.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.


#4

Glad I could help. Ionic covered solving this in this blog post:

http://blog.ionic.io/handling-cors-issues-in-ionic/


#5

I made all the changes to the files mentioned in the tutorial and still continue with the same error :’(

I really need to get it!


#6

any help please!!!


#7

if you are using cordova 5.0 you need to add whitelist plugin and allow access to all your external sources:


#8

i try this! but i get same error :frowning:


#9

Did you tested this on your computer or on mobile device?

whitelist plugin only works if you build the app and trying it on your mobile device.

You can check if it is a cors problem:
Start your chrome with “–disable-web-security” as additional parameter.

like open cmd and call “chrome.exe --disable-web-security”

And test it again.


#10

in ionic view this work, ionic view app id: C1289215 Look on tab chats, but when I generate the apk it does not work on android.


#11

You can check it.


#12
<access origin="*"/>

Put this in your config.xml file.


#13

dont work!

XMLHttpRequest cannot load http://yanupla.com/apps/ligajaguares/equipos.json. The ‘Access-Control-Allow-Origin’ header contains multiple values ‘*, *’, but only one is allowed. Origin ‘http://localhost:8100’ is therefore not allowed access.

I got tired of trying , there’s no way :frowning:


#14

Try another site,

http://ip.jsontest.com/

See http://jsontest.com/ for more examples.