解決從json文件中獲取不到數據的問題
阿新 • • 發佈：2017-07-21
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文件中獲取不到數據的問題