2016-12-01 7 views
0

私はまだAngularJSの新機能ですが、これはJSONドキュメントからのインポートに関係しています。JSONファイルがインポートされていませんか?

私はJSファイルのオブジェクトとしてすべてを作ったギターのリストを持っています(それはすべて正常に動作していました)。そしてそれらを表示するにはng-repeatを使います。今、これらのオブジェクトを別々のJSONファイルに配置したいと思います。

HTMLテンプレート:

<section id="guitarSections" ng-controller="GuitarCtrl"> 
     <div id="guitarDivs" data-ng-repeat="guitar in guitars"> 
      <img id="guitarImages" src="{{guitar.imageURL}}"> 

      <div id="text"> 
       <h2 class="information">{{guitar.title}}</h2> 
       <p class="information">Instrument: {{guitar.instrument}}<p> 
       <p class="information">Color: {{guitar.color}}</p> 
       <p class="information">Price: {{guitar.price}}</p> 
      </div> 
     </div> 

     <br> 

    </section> 

JS

var app = angular.module("myApp", []); 

app.controller("GuitarCtrl", function($scope, $http) { 
    var url = "data.json"; 

    $http.get(url).then(function(response) { 
     $scope.guitars = response.data; 
    }); 
}); 

そして、私のJSONの小さなサンプル:

{ 
    "guitars":[ 
      { 
       "title": "Yamaha Revstar 420", 
       "brand": "Yamaha", 
       "instrument": "Electric Guitar", 
       "color": "Red", 
       "price": "$499.99", 
       "details": "Yes", 
       "imageURL": "YamahaRS420.jpg" 
      }, 

      { 
       "title": "Yamaha Pacifica Series PAC012", 
       "brand": "Yamaha", 
       "instrument": "Electric Guitar", 
       "color": "Blue", 
       "price": "$", 
       "details": "Yes", 
       "imageURL": "YamahaPacificaSeriesPAC012.jpg" 
      } 
]} 

私はPythonのサーバー上でそれを実行するとき(のpython -m SimpleHTTPServer )、ページはロードされますが、コンテンツはインポートされず、1つのギターセクションのみが表示されます。

追加注記:ネットワークの検査も行いましたが、ドキュメントの名前の列には、 '%7B%7Bguitar.imageURL%7D%7D'が赤で表示されていました。これを検討すると、ページがポップアップし、言っている、私に404を与える:

エラーコード404

メッセージ:ファイルが見つかりません。

エラーコードの説明:404 =指定したURIに一致するものはありません。

私はすべての私の文書の名前のスペルが間違っていないことを確認しており、各画像をインポートすることができます。

答えて

0

まず、JSONにギターの配列が含まれていることが期待されますが、実際にはguitarsという名前の単一の属性を持つオブジェクトが含まれています。

第2に、補間されていないURLへのこのリクエストを回避するには、IMG要素にsrcではなくng-srcを使用する必要があります。

関連する問題