Question

我仍然是AngularJS的新手，但这涉及从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）时，页面会加载，但是没有任何内容会被导入，只会显示一个吉他部分。

附加说明：我还检查了网络，在带有文件名称的栏目中，我碰巧注意到了红色的'％7B％7Bguitar.imageURL％7D％7D'。检查完这个后，会弹出一个页面并给我一个404，其中包含：

错误代码404。

消息：找不到文件。

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

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

Answer 1

首先，您希望您的JSON包含一个吉他数组，但它实际上包含一个名为guitars的单个属性的对象。

其次，您应该使用ng-src而不是src作为IMG元素，以避免对非插值URL的请求。

JSON文件无法导入？

1 个答案: