我是AngularJS的新手,并尝试使用AngularJS 1.x处理单页推车功能。我有一个JSON数据,从我显示我的产品列表。视图如下:
当我点击“更多信息”按钮时,它会重新启动到产品详细信息页面。在这样做时,我遇到了一个错误:
SyntaxError:JSON输入的意外结束
背后的原因是JSON数据。在调用期间检索的JSON数据不是完整的,因此是错误。记录的JSON数据如下:
{“p_id”:“1”,“p_name”:“cotton tshirt”,“p_variation”:“solid green”,“p_style”:“ms13kt1906”,“p_selected_color”:{“name”: “蓝”, “十六进制编码”:“ 因此,我得到以下观点:
我的控制器代码是:
angular.module('myApp.product.controllers', []).
controller('ProductsController',
['$scope', '$log', '$http', '$state',
function ($scope, $log, $http, $state) {
$log.log('inside product controller');
$http.get('data/cart.json').
success(function (data) {
$scope.products = data.productsInCart;
}).
error(function () {
$log.log('could not find cart.json');
});
}]).
controller('ProductDetailsController',
['$scope', '$log', '$stateParams',
function ($scope, $log, $stateParams) {
$log.log('inside product details controller ' + $stateParams.product);
$scope.eachData = JSON.parse($stateParams.product);
}]);
'部分'代码是:
<div class="container main">
<div class="row">
<div class="col-md-4">
<img ng-src="img/{{eachData.p_image}}" class="img-responsive" alt="product image">
</div>
<div class="col-md-8">
<div class="thumbnail">
<div class="caption-full">
<h4 class="pull-right">{{eachData.p_originalprice}}</h4>
<h4><a href="#">{{eachData.p_name}}</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p class="text-right">
<a href="#" class="btn btn-primary">Buy Now!</a>
</p>
</div>
</div>
</div>
</div>
</div>
我的模块代码是:
angular.module('cartApp.product').config([
'$locationProvider', '$stateProvider',
function($locationProvider, $stateProvider){
$stateProvider.state('products', {
url: '/products',
controller: 'ProductsController',
templateUrl: 'module/products/views/products.html'
});
$stateProvider.state('productsDetails', {
url: '/details/:product',
controller: 'ProductDetailsController',
templateUrl: 'module/products/views/details.html'
});
}
]);
在我的网址中,我获取了整个JSON数据,但是当我尝试检索它并将其用于我的视图页面时,返回的JSON数据不完整,因此出错。
请帮助我理解在我的控制器中使用它时返回的JSON数据不完整的原因。
指导我找到解决方案。
提前谢谢。
答案 0 :(得分:0)
感谢@BrianGlaz,我能够解决问题。我的JSON有十六进制代码的#值。这导致了休息。从所有十六进制代码中删除#后,它现在正常工作。
感谢大家抽出时间阅读并回复我的查询。