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＆amp; cribsController.js在脚本文件夹中。当我输入网址＆＃34; http://localhost/ng-cribbs/＆＃34;在Firefox中，输出是一个完全空白的页面，没有任何类型的错误消息，因此调试困难。

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

Answer 1

您的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."
  }]

Answer 2

你的http调用给你一个json字符串，你应该把它转换成一个javascript数组，如下所示：$ scope.cribs = JSON.parse（data）

在AngularJS中从JSON文件获取数据时输出页面为空

2 个答案: