首页 > 代码库 > 解决从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文件中获取不到数据的问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。