从控制器返回不完整的JSON数据-AngularJS

Question

I am new to AngularJS and trying to work on a Single Page Cart functionality using AngularJS 1.x. I have a JSON data from where I am showing my product list. The view is below:

When I am clicking the 'More Info' button it is rediredting to a product details page. While doing so I am encountering an error:

SyntaxError: Unexpected end of JSON input

The reason behind it is the JSON data. The JSON data that is retrieved during the call is not a complete one, hence the error. Logged JSON data is below:

{"p_id":"1","p_name":"cotton tshirt","p_variation":"solid green","p_style":"ms13kt1906","p_selected_color":{"name":"blue","hexcode":" Thus I am getting the below view:

My controller code is:

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);

}]);

The 'Partial' code is:

<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>

My module code is:

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'
        });
    }
]);

In my url I am getting the entire JSON data, but when I am trying to retrieve it and use it for my view page, the JSON data returned is incomplete, hence the error.

Please help me understand the problem why the returned JSON data is incomplete when I am using it in my controller.

Guide me to a solution.

Thank you in advance.

Answer 1

Thanks to @BrianGlaz I was able to solve the problem. My JSON had # values for hexcode. That was causing the break. Now its working fine after removing the # from all the hexcode.

Thanks to all for taking time out to read and respond to my query.