2017-03-16 9 views
0

AngularJSを初めて使用し、AngularJS 1.xを使用してシングルページカート機能を使用しようとしています。私は私の製品リストを表示しているところからJSONデータを持っています。ビューは以下の通りです:コントローラからの不完全なJSONデータの返送 - AngularJS

enter image description here

私はそれは、製品の詳細ページへrediredtingされる「詳細」ボタンをクリックしています。そうしながら、私はエラーが発生しています:

にSyntaxError:JSON入力の予期しない終わり

その背後にある理由は、JSONデータです。呼び出し中に取得されるJSONデータは完全なものではないため、エラーです。記録されたJSONデータは、以下である:

{ "P_ID": "1"、 "P_NAME": "綿Tシャツ"、 "p_variation": "緑色"、 "p_style": "ms13kt1906"、 "p_selected_color": { "名前": "青"、 "hexcode":」 このように、私は以下のビュー取得しています:

enter image description here

を私のコントローラのコードは次のとおりです。

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> 

私のモジュールのコードは次のとおりです。私のURL私は全体のJSONデータを取得していますが、私はそれを取得し、私の見解ページのためにそれを使用しようとしていたときに、返されるJSONデータがあるで

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データが不完全な理由を理解してください。

解決策をご案内します。

ありがとうございます。

+1

ここからjsonを詳細ページにしていますか?あなたは、この動作をシミュレートするいくつかのコードやいくつかのjsfiddleを提供できますか? –

+0

ローカルディレクトリにJSONファイルがあり、 '$ http.get( 'data/cart.json')を使用しています。 JSONにアクセスするための ' ; \t成功(関数(データ){ \t \t \t $ scope.products = data.productsInCart})。 私はより良い理解のために上記のコントローラコードを編集しました。 – NoviceCoder

+0

JSON文字列全体をURLパラメータとして渡そうとしていますか?それはおそらく良い考えではありません。 –

答えて

0

@BrianGlazのおかげで、私は問題を解決することができました。私のJSONは16進数の値を#持っていました。それは休憩を引き起こしていた。今、すべての16進コードから#を削除した後、正常に動作します。

私のクエリを読んだり応答したりするのに時間がかかることに感謝します。

関連する問題