Ionic app cannot load JSON file

Question

I am learning how to use Ionic, and am currently using localhost to test the app. I am trying to build a contacts list app, and contact information such as name, email, contact phone number, and avatar are loaded from a JSON file. But nothing shows up, and the Chrome error message in the console says this: "Failed to load resource: the server responded with a status of 404 (Not Found)"

Here is my index.html file:

   <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <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/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane ng-controller-"myController">
      <ion-header-bar class="bar-dark">
      <button class="button button-clear icon ion-navicon"></button>
        <h1 class="title">Friends List</h1>
        <button class="button button-clear icon ion-settings"></button>
      </ion-header-bar>
        <div class="bar bar-subheader item-input-inset">
            <label class="item-input-wrapper">
              <i class="icon ion-search placeholder-icon"></i>
              <input type="text" placeholder="Search"/>
            </label>
        </div>
      <ion-content class="has-subheader">
        <div class="list">
          <div class="item item-thumbnail-left" ng-repeat="element in data.persons">
            <img src="{{ element.personDisplayPicture }}"/>
            <h2>{{ element.personName }}</h2>
            <p>{{ element.personContact }}</p>
            <p>{{ element.personEmail }}</p>
          </div>

        </div>
      </ion-content>
    </ion-pane>
  </body>
</html>

And here is my app.js file:

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {

      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);


      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.controller('myController', function($scope,$http){

  $http.get('js/addressbook.json').success(function(data){
    $scope.data = data;
  })

})

My addressbook.json file is located within the "js" folder, where my app.js file is also located. The addressbook.json file just uses some sample info like so:

{"persons": [
  {
    "personContact": "+91-9997725251",
    "personDisplayPicture": "https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xtf1/v/t1.0-9/1509974_10205886752870556_6275779368926452443_n.jpg?oh=d407cc6c85c581f4ee96cd65ea15a171\u0026oe=55ECD16C\u0026__gda__=1443235524_024ba60447125011575b739fb45d23c4",
    "personEmail": "[email protected]",
    "personName": "Samarth Agarwal"
  },

  {
    "personContact": "+91-9874563210",
    "personDisplayPicture": "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xfp1/v/t1.0-1/p160x160/10997379_828487523879435_5609581450404507062_n.jpg?oh=109f958adce1bb72754ed1772e598893&oe=56276727&__gda__=1441608268_136ec1af8e25e4364909decbd724f26a",
    "personName": "Apoorva Agarwal",
    "personEmail": "[email protected]"
  }
]}

try $http.get('file:///android_asset/www/js/addressbook.json') — Yin Gang
– Yin Gang, Commented May 22, 2016 at 8:32

liuwenzhuang · Accepted Answer · 2016-05-22 08:36:42Z

1

I think your code has no problem, except that angular has deprecated legacy promise methods success and error of $http after version 1.4.4, you should use standard then method instead if your ionic depends on higher angular version.
And then use ng-src instead of src when use url interpolation in case of url 404 error. By the way, the url of personDisplayPicture property in your json seems that work badly.
And for the Chrome error message, it should be an intended cordova.js error.
I have build a plunker project that use your code. Hope this will help you, regards!

answered May 22, 2016 at 8:36

liuwenzhuang

9667 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user5942759 Over a year ago

Thanks for the plunker demonstration. I tried adding in your changes, and I am no longer getting the 404 error. I am now just simply seeing nothing at all. I tried using the code to make a plunker of my own, and that worked. So it's leading me to believe that I might be using the localhost server incorrectly. I have the bar at the top, and the menu and settings icons, but no contact data is displayed.

Collectives™ on Stack Overflow

Ionic app cannot load JSON file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related