Can't read JSON


#1

Hi guys,

Relatively new to the ionic framework, but I’m having issues with reading JSON files. I’ve tried numerous examples but it just won’t seem to work. For example using the following tutorial:
Here

I have literally copy and pasted everything, then changed the JSON url to: http://bookmein.co/json/Customers_JSON.json (which when running through JSONLint it reports as fine.

Nothing is displayed in the app!

My code:

index.html :
`

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/controllerJs.js"></script>
<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>
  <ion-content>
   <ion-list>
       <ion-item ng-repeat="x in names|orderBy:'City'">
       {{ x.Name + ', ' + x.Country+', '+x.City}}
       </ion-item>
     </ion-list>
  </ion-content>
</ion-pane>  
`

controllerJS.js
var app = angular.module('myApp', ['ionic']); app.controller('customersController', ['$scope', '$http', function($scope,$http) { $http.get("http://bookmein.co/json/Customers_JSON.json") .success(function (response) { $scope.names = response; }); }]);

Any ideas?

Thank you!


#2

See if there are any messages in the JavaScript console. I suspect it might be an issue with Content-Security-Policy disallowing XHR access to the bookmein.co domain.


#3

And remember to do always do console.log() to easily debug your app using the dev tool in your browser, checking your json response.


#4

That was indeed it! Apologies for my ignorance. Thank you guys!