首页 > 代码库 > 解决从json文件中获取不到数据的问题

解决从json文件中获取不到数据的问题

   在写项目时我们需要数据渲染,在渲染的过程中有时会发现有些数据一直渲染不到页面上;

 

 解决此问题我总结了一下几点

  1、首先先查找自己的json文件路径是否正确,

    

错误示范:

 $http.get(index.json).success(function(data){
                $scope.Y_box=data.Y_box;
            })


正确规范: 
$http.get(‘index.json).success(function(data){
                $scope.Y_box=data.Y_box;
            })

 

  2、查看从后台获取的数据是否存在,查看方法:

app.controller(test,function($scope,$http){
            $http.get(json.json).success(function(data){
                $scope.Y_box=data.Y_box;
                alert($scope.Y_box);//通过弹框来查看是否为获取到数据,如果弹出undefined,那么说明没有获取到数据,请从新获取
            })
        })

  3、查看HTML页面是否绑定正确:

<!--//有时会犯这样的错误-->
    <h4>{item.h4}</h4>
    
    <!--正确写法-->
    <h4>{{item.h4}}</h4><!--//获取数组里的 h4 数据-->

   4、在渲染数组里数组时,是否渲染的是当前数组里的数组:

json文件:

 

{
  "Y_box":[
    {
      "h4":"我是数组1",
      "Y_BoxMain":[
        {"txt":"数组1里的数组1"},
        {"txt":"数组1里的数组2"},
        {"txt":"数组1里的数组3"}
      ]
    },
    {
      "h4":"我是数组2",
      "Y_BoxMain":[
        {"txt":"数组2里的数组1"},
        {"txt":"数组2里的数组2"},
        {"txt":"数组2里的数组3"}
      ]
    },
    {
      "h4":"我是数组3",
      "Y_BoxMain":[
        {"txt":"数组3里的数组1"},
        {"txt":"数组3里的数组2"},
        {"txt":"数组3里的数组3"}
      ]
    }
  ]
}

 

我们举个例子看看,你是否出现这样的错误:

 $http.get(json.json).success(function(data){
                $scope.Y_box=data.Y_box;
//错误示范
                $scope.Y_box1=data.Y_box.Y_BoxMain;//这样是获取不到的,因为data.Y_box是一个数组,没有具体的数据,系统无法判断

//正确规范
          // 你必须获取数组里的具体数据,如获取第一个数组里的数据
                $scope.Y_box1=data.Y_box[0].Y_BoxMain;
              
            })

 

以下是一个渲染数据的完整代码:

//html:



<!DOCTYPE html>
<html ng-app="mk">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        .Y_box{
            width: 300px;
            height: 200px;
            border: 1px solid coral;
        }
    </style>

    <script src=http://www.mamicode.com/"angular.js"></script>
    <script>
        var app=angular.module("mk",[]);
        app.controller(test,function($scope,$http){
            $http.get(json.json).success(function(data){
                $scope.Y_box=data.Y_box;
            })
        })
    </script>
</head>
<body ng-controller="test">
<div class="Y_box" ng-repeat="item in Y_box">
   
    <h4>{{item.h4}}</h4><!--//获取数组里的 h4 数据-->
    <div class="Y_BoxMain">
        <ul>
            <!--//获取当前数组里的数组===item.Y_BoxMain-->
            <li ng-repeat="Data in item.Y_BoxMain">{{Data.txt}}</li>
        </ul>
    </div>
</div>

</body>
</html>

 

解决从json文件中获取不到数据的问题