从 AngularJS 中的 JSON 文件获取数据时输出空白页

Question

我刚刚开始学习 angularjs，我正在尝试从我的 json 文件中加载数据以供查看。 json 文件有房屋清单。但是当我加载 index.html 文件时，我的视图中没有显示。

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>

我正在尝试运行 XAMPP 的 htdocs 文件夹中的上述代码。文件夹结构在下面的屏幕截图中。

json 文件位于数据文件夹中，文件 cribsFactory.js 和 cribsController.js 位于脚本文件夹中。当我在 Firefox 中键入 URL “http://localhost/ng-cribbs/” 时，输出是一个完全空白的页面，没有任何类型的错误消息，因此调试很困难。

我能够使用数组加载数据，但在使用 JSON 文件时遇到问题。无法理解我做错了什么。请帮忙！！

Answer 1

你的 http 调用给你一个 json 字符串，你应该像这样将它转换成一个 javascript 数组：$scope.cribs = JSON.parse(data)

Answer 2

您的 json 数据无效，请验证之前的任何 json 数据，您可以使用以下更正后的 json。希望能帮助到你！ 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."
  }]

从 AngularJS 中的 JSON 文件获取数据时输出空白页

Output page blank while fetching data from JSON file in AngularJS

javascript

json

angularjs

angularjs-service

angularjs-http