Output page blank while fetching data from JSON file in AngularJS

Question

I have just started learning angularjs, I'm trying to load data from my json file on view. json file has a list of houses. But does not get showed on my view when I load the index.html file.

Data.json

      [
{
    "type": "Condo",
    "price": 220000,
    "address": "213 Grove Street",
    "description": "Excellent place! Really nice view!"
},
{
    "type": "House",
    "price": 410500,
    "address": "7823 Winding Way",
    "description": "Beautiful home with lots of space for large family."
},
{
    "type": "Duplex",
    "price": 395000,
    "address": "834 River Lane",
    "description": "Great neighourhood and lot's of nice green space."
},


]

cribsFactory.js

    angular
   .module('ngCribs')
   .factory('cribsFactory', function($http) {

    function getCribs() {

        return $http.get('data/data.json');
    }

    return {
        getCribs: getCribs
    }
     });

cribsController.js

     angular
       .module('ngCribs')
       .controller('cribsController', function($scope, cribsFactory) {

   $scope.cribs;

   cribsFactory.getCribs().success(function(data) {
        $scope.cribs = data;
    }).error(function(error) {
       console.log(error);
   });

    });

index.html

       <!doctype html>
       <html>
       <head>
       <meta charset="utf-8">
        <title>ng-cribbs</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        </head>
        <body ng-app="ngCribs" ng-controller="cribsController">
            <div class="well" ng-repeat="crib in cribs">
                <h3>{{ crib.address }}</h3>
                <p>
                    <strong>Type: </strong>{{ crib.type }}</p>
                <p>
                    <strong>Description: </strong>{{ crib.description }}</p>
                <p>
                    <strong>Price: </strong>{{ crib.price | currency }}</p>
            </div>
        </body>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"/>
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.min.js"/>
    </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"/>
</script>
<script src="app.js"/>
</script>
<script src="scripts/cribsController.js"/>
 </script>
 <script src="scripts/cribsFactory.js"/>
  </script>
  </html>

I'm trying to run the above code in htdocs folder of XAMPP. The folder structure is in the screen shot below.

The json file is inside the data folder and the files cribsFactory.js & cribsController.js are in scripts folder. When i type the URL "http://localhost/ng-cribbs/" in Firefox the output is a completely blank page with no error message of any sort hence the difficulty in debugging.

I was able to load data using an array but facing problem while using JSON file.. Can't understand what I'm doing wrong. Please help!!

Possible duplicate of [AngularJS: factory $http.get JSON file](http://stackoverflow.com/questions/16930473/angularjs-factory-http-get-json-file) — Ankh, Dec 07 '15 at 15:47
@ShaohaoLin I have edited my question for your reference.. Please have a look.. — Lucy, Dec 07 '15 at 15:57
According to the screen shot you posted, your data.json is in the same level as the data folder. Wasn't data.json supposed to be under the data folder? — Jodevan, Dec 07 '15 at 16:02
@Jodevan I put it there after the json file inside data folder did not generate any output. — Lucy, Dec 07 '15 at 16:06
have you tried the url as `../data/data.json`, instead of just `data/data.json`? — Rob Wilson, Dec 07 '15 at 16:12
@RobWilson Yes tried it but still nothing. Just a blank page.. — Lucy, Dec 07 '15 at 16:17
Have you tried moving the json file into the same folder as the scripts (as a test), to get around the same domain issue that @Ankh mentions? (change the url to be just `data.json`). Also, are you able to see the request going out on the network tab of the browser's dev tools; is there a response with the data? — Rob Wilson, Dec 07 '15 at 16:49
How about don't initialize `$scope.cribs;` above the factory service? What that mean is delete the `$scope.cribs;`. — Shaohao, Dec 07 '15 at 20:11
@ShaohaoLin The error was due to invalid JSON. After I validated it the correct output was being displayed. — Lucy, Dec 08 '15 at 03:32

score 1 · Accepted Answer · answered Dec 07 '15 at 19:43

1

Your json data was not valid, validate any json data before and you can use the below corrected json. Hope it helps! validate json here

     [{
    "type": "Condo",
    "price": 220000,
    "address": "213 Grove Street",
    "description": "Excellent place! Really nice view!"
  }, {
    "type": "House",
    "price": 410500,
    "address": "7823 Winding Way",
    "description": "Beautiful home with lots of space for large family."
  }, {
    "type": "Duplex",
    "price": 395000,
    "address": "834 River Lane",
    "description": "Great neighourhood and lot's of nice green space."
  }]

answered Dec 07 '15 at 19:43

anshulix

197
11

Thanks a lot for your help!! It seems that the comma before the closing square bracket was causing problem. After I removed it I'm getting the output correctly.. – Lucy Dec 08 '15 at 03:30
Yes that trailing comma caused all problem! Rest everything is cool with code. – anshulix Dec 08 '15 at 20:09

score -1 · Answer 2 · answered Dec 07 '15 at 16:19

-1

Your http call gives you a json string, you should convert it to a javascript array like so: $scope.cribs = JSON.parse(data)

answered Dec 07 '15 at 16:19

Guenter Guckelsberger

940
8
6

1

I just see, the data.json above is not valid json, the last , is wrong, but maybe this is just an extract of your original data file. – Guenter Guckelsberger Dec 07 '15 at 16:35
@GuenterGuckelsberger The error was indeed due to invalid JSON. Extra comma after the closing square bracket was causing the error. Removing it solved the problem.. – Lucy Dec 08 '15 at 03:34

Output page blank while fetching data from JSON file in AngularJS

2 Answers2