JSON文件没有导入？

问题描述：

我对AngularJS仍然很陌生，但是这涉及从JSON文档导入。JSON文件没有导入？

我有我在我的JS文件中作出的所有作为对象吉他的列表（而拥有了一切工作正常），我用NG-重复有所有这些显示。现在，我想将这些对象放置在单独的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>

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服务器上运行它（蟒蛇-m SimpleHTTPServer ），页面加载，但没有内容会被导入，它只显示一个吉他部分。

附加说明：我还检查了网络，并在文档名称栏中，我碰巧注意到，红色显示'％7B％7Bguitar.imageURL％7D％7D'。在研究这个，页面弹出，给了我一个404，它说：

错误代码404

消息：文件未找到。

错误代码说明：404 =没有匹配给定的URI。

虽然我已经检查并确保所有的我的文档的名字都没有拼写错误，并且每个图像可以导入。

答

首先，你希望你的JSON包含吉他的数组，但它实际上包含了一个属性命名吉他的对象。

其次，你应该使用NG-SRC，而不是SRC您IMG元素，以避免该请求到非插URL。

JSON文件没有导入？

相关推荐