[英]$http.get returning malformed data
我正在学习Angular.js,今天是我的第二天。 以下是一个简单的功能
var XApp = angular.module("XApp", ['ngResource']);
XApp.controller('MenuParentController', function ($scope, $http) {
$http.get('api/menu?type=json').success(function (data) {
console.log('Inside MenuParentController ' + JSON.parse(data));
$scope.parentItems = JSON.parse(data);
});
})
以下是console.log的输出:
Inside MenuParentController [{"NodeId":261,"ParentId":9,"NodeName":"Clothing"},{"NodeId":262,"ParentId":9,"NodeName":"Jewellery"},{"NodeId":263,"ParentId":9,"NodeName":"Bags"},{"NodeId":12,"ParentId":1,"NodeName":"Home Décor"},{"NodeId":10,"ParentId":1,"NodeName":"Stationery & Office Supplies"},{"NodeId":811,"ParentId":1,"NodeName":"Gifts"}]
这是我得到的错误:
Error: [ngRepeat:dupes] http://errors.angularjs.org/1.2.14/ngRepeat/dupes?p0=item%20in%20parentItems&p1=string%3Ad
进行JSON.parse(data)[0]
会产生[
作为输出,这是错误的。 相反,它应该是{"NodeId":261,"ParentId":9,"NodeName":"Clothing"}
HTML:
<li data-ng-repeat="item in parentItems"><a href="/{{ item.NodeId }}/{{ item.NodeName }}" title="{{ item.NodeName }}" class="newMenuClass {{item.NodeName | lowercase }}">{{ item.NodeName }}</a></li>
Angular以某种方式将JSON对象的每个字符视为对象的属性。 知道为什么吗?
编辑:
当我使用$ .ajax时一切正常
$.ajax({
url: 'api/menu?type=json',
dataType: 'json',
async: false,
success: function (data) {
console.log('Inside MenuParentController ' + data);
$scope.parentItems = JSON.parse(data);
}
});
编辑2:
当我点击http://localhost:57086/api/menu?type=json
这是我得到的输出
"[{\"NodeId\":261,\"ParentId\":9,\"NodeName\":\"Clothing\"},{\"NodeId\":262,\"ParentId\":9,\"NodeName\":\"Jewellery\"},{\"NodeId\":263,\"ParentId\":9,\"NodeName\":\"Bags\"},{\"NodeId\":12,\"ParentId\":1,\"NodeName\":\"Home Décor\"},{\"NodeId\":10,\"ParentId\":1,\"NodeName\":\"Stationery & Office Supplies\"},{\"NodeId\":811,\"ParentId\":1,\"NodeName\":\"Gifts\"}]"
就这样
错误是将数据序列化两次,导致包含实际JSON数据的单个字符串。
带有dataType: 'json'
$.ajax
在将数据传递给success
回调之前隐式反序列化数据。 这就是第二次反序列化运行成功进行JSON.parse
的原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.