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

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

2024-11-01 15:51:39   207人阅读

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

 

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

　　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文件中获取不到数据的问题


联系
我们