Question

我只花了最后一小时搜索和阅读一堆类似的stackoverflow页面，但无法找到解决方案。我会尝试尽可能描述，但如果我需要提供任何其他详细信息，请告诉我。

基本上，我正在尝试使用$ http GET获取.json文件。一旦我得到它，我将它存储在$ scope.bags然后在我的html（视图）页面上，我试图访问要使用的内容，如标题，细节，图像等。

让我们从控制器开始：

munyApp.controller('productController', ['$scope', '$location', '$http',
    function ($scope, $location, $http) {
        var $url2parse = $location.path();
        var $urlSplit = $url2parse.split("/");
        var $bag2show = $urlSplit.pop();        
        var $bag2showString = String($bag2show);
        console.log($bag2showString);

        $http({method: 'GET', url: 'handbags/n1-black-details.json'}).success(function(data) {
            $scope.bags = data;
            console.log($scope.bags);
            $scope.message = "it works!";
        });

目前，请忽略随机变量行。我稍后会谈到这一点，因为我猜这与我的问题无关。

这里是 HTML 的一小块，其中使用了控制器：

<div id="detail_large_container" ng-controller="productController">
    {{bags.id}}
    {{bags['id']}}
</div>

出于某种原因，我无法显示id值，这应该是“n1-black”。

这可能看起来非常简单（可能是，我是所有这些的初学者），但这一切让我感到困惑的原因是我能够为另一个控制器做同样的事情并且它可以解决精细。我复制并粘贴了工作控制器以修改为新的控制器，无论出于什么原因它似乎都不起作用。

以下是 IS 工作的另一个控制器的示例：

munyApp.controller('handbagsController', ['$scope', '$http',
    function ($scope, $http) {
        $http.get('handbags/bagsfull.json').success(function(data) {
            $scope.bags = data;
        });
}]);

使用上面的控制器，它可以很好地抓取json文件，并且我可以使用{{bags.somekey}}在html页面中使用它的内容。

我遇到了一些奇怪的事情：

在我的新控制器上，当我使用 $ http.get（）语法时，它无法获取.json文件。当我更改语法以使用 $ http（{method：'GET'，url：''}）样式时，它才开始成功获取它。为什么我必须改变它对我来说真的很困惑。我将所有控制器存储在同一个.js文件中，而我的旧控制器使用$ http.get（）罚款，而我的新控制器则失败。
在将$ scope.bags设置为从.json文件获取的数据之后，我包含了$ console.log（$ scope.bags）。在我的chrome控制台中，它显示它正好获取了.json文件。它正确地返回了我的.json文件，所有数据都保持不变。但是当我尝试在我的html中使用数据时，它只是空白。
为了测试，我在$ http.success函数中设置了$ scope.message =“it works”。当我在html中使用{{$ scope.message}}时，它会正确显示消息。这让我相信我正确使用$ scope（我对$ scope的理解仍然非常有限）。所以令人难以置信的是.json被正确获取（正如我在控制台中看到的那样），并且html可以显示$ scope.message但不能使用.json中的$ scope.data。
最后，控制器代码中的所有随机变量行只是我在最后一个“/”之后获取URL部分的一种方式。它只使用标准的JS代码，我认为这是可以的。也许不是吗？

对此有任何帮助或见解将不胜感激。如果您需要任何其他有用的信息，请告诉我们。

以下是.json文件内容（根据要求提供）：

[
    {
        "id": "n1-black",
        "title": "n&deg;1 (Black)",
        "description": "TOTE IN TEXTURED CALFSKIN\\nBLACK\\n001",
        "images": [
            "images/handbags/details/n1-black-1.jpg",
            "images/handbags/details/n1-black-2.jpg",
            "images/handbags/details/n1-black-3.jpg",
            "images/handbags/details/n1-black-4.jpg"
        ]
    }
]

Answer 1

只是一个猜测，但您可能需要先解析JSON才能使用它。

试试这个：

$http({method: 'GET', url: 'handbags/n1-black-details.json'}).success(function(data) {
    $scope.bags = JSON.parse(data);
    console.log($scope.bags);
    $scope.message = "it works!";
});

Answer 2

如果有人遇到类似问题，我会提供解释。

如果您查看他的JSON文件，您会看到它包含一个JSON数组，其中包含一个项目。

[
    {
        "id": "n1-black",
        "title": "n&deg;1 (Black)",
        "description": "TOTE IN TEXTURED CALFSKIN\\nBLACK\\n001",
        "images": [
            "images/handbags/details/n1-black-1.jpg",
            "images/handbags/details/n1-black-2.jpg",
            "images/handbags/details/n1-black-3.jpg",
            "images/handbags/details/n1-black-4.jpg"
        ]
    }
]

在成功块中，他将JSON文件的get请求的响应分配给$ scope上的bags变量。

当他试图使用表达式{{bags.id}}时，它没有用，因为bags不是一个对象而是一个对象数组。当他使用{{bags[0].id}}时它起作用，因为bags[0]是他期待的实际对象。

Answer 3

我在尼克的帮助下找到了解决方案。它仍然没有意义，为什么它以这种方式工作，但确实如此。

我必须通过声明{{bags [0] .something}}而不是{{bags.something}}来说明我正在使用的.json对象的哪一部分。我仍然有点不确定为什么，因为我的json文件中只有一个对象。我猜我不得不像那样写它而不管其中的对象数量。

另外，我遇到麻烦的真正原因是因为我在html页面中放置了 ng-controller 。

我所做的是把它放在名为 A 的div中，并试图访问使用该控制器从另一个名为 B 的div获取的数据。现在，为什么这不起作用对我来说很有意义，而且我认为我只是朝着整个MVC想法的方向迈进了一步。

感谢大家的帮助！

AngularJS - 无法在视图中访问检索到的JSON数据

3 个答案: