1. 程式人生 > >解決從json文件中獲取不到數據的問題

解決從json文件中獲取不到數據的問題

app 一個數 你是 項目 clas control cor solid 例子

   在寫項目時我們需要數據渲染,在渲染的過程中有時會發現有些數據一直渲染不到頁面上;

 解決此問題我總結了一下幾點

  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="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文件中獲取不到數據的問題