AngularJS-无法在视图中访问检索到的JSON数据 [英] AngularJS - Can't access retrieved JSON data in the view

问题描述

我刚刚花了最后一个小时来搜索和阅读一堆类似的stackoverflow页面，却找不到解决方案.我会尽力描述一下，但是如果需要提供其他详细信息，请告诉我.

I just spent the last hour searching and reading a bunch of similar stackoverflow pages and was unable to find a solution. I'll try to be as descriptive as possible, but please let me know if I need to provide any other details.

基本上，我正在尝试使用$ http GET抓取.json文件.一旦获得它，我将其存储在$ scope.bags中，然后在我的html(视图)页面上，我试图访问要使用的内容，例如标题，详细信息，图像等.

Basically, I'm trying to grab a .json file using $http GET. Once I get it, I'll store it in $scope.bags and then on my html (view) page, I am trying to access the contents to use such as title, details, images, etc.

让我们从控制器开始:

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!";
        });     

现在，请忽略随机var行.我稍后再讲，因为我猜这与我的问题无关.

For now, please ignore the random var lines. I'll get to that later, as I'm guessing it's not related to my issue here.

这是使用控制器的 HTML 的一小段:

And here's a small block of the HTML where the controller is to be used:

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

由于某种原因，我无法显示id值，该值应该为"n1-black".

For some reason, I cannot get the id value to show up, which is supposed to be "n1-black".

这看起来真的很简单(可能是，我是所有这些的初学者)，但是这一切令我感到困惑的原因是我能够为另一个控制器做同样的事情，并且效果很好美好的.我复制并粘贴了正在工作的控制器以进行修改，使其成为此较新的控制器，无论出于何种原因，它似乎都不起作用.

This may seem really simple (it probably is, I'm a beginner with all of this), but the reason this is all perplexing to me is that I was able to do this same thing for another controller and it works out fine. I copy and pasted the working controller to modify as this newer one, and for whatever reason it doesn't seem to work.

这是 IS 工作的另一个控制器的示例:

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

使用上述控制器，它可以很好地捕获json文件，并且我可以通过使用{{bags.somekey}}在html页面中使用其内容.

With this above controller, it grabs the json file fine and I'm able to use its contents in the html page by using {{bags.somekey}}.

我遇到的一些奇怪的事情:

1. 在我的新控制器上，当我使用 $ http.get()语法时，它无法获取.json文件.当我更改语法以使用 $ http({method:'GET'，url:''})样式时，它才开始成功获取它.为什么我必须更改它真的让我感到困惑.我将所有控制器存储在同一个.js文件中，较旧的控制器使用$ http.get()罚款，而较新的控制器则失败.
2. 在将$ scope.bags设置为从.json文件获取的数据之后，我包含了$ console.log($ scope.bags).在我的chrome控制台中，它显示它很好地提取了.json文件.它正确返回了我的.json文件，其中所有数据均完整无缺.但是当我尝试使用html中的数据时，它只是空白.
3. 为了进行测试，我在$ http.success函数内设置了一个$ scope.message ="it works".当我在html中使用{{$ scope.message}}时，它会正确显示该消息.这使我相信我正确使用了$ scope(我对$ scope的理解仍然很有限).因此令人困惑的是，.json已正确获取(如我在控制台中所见)，并且html可以显示$ scope.message，但不能使用来自.json的$ scope.data.
4. 最后，控制器代码中所有这些随机var行只是我获取最后一个"/"之后的URL部分的一种方式.它只使用标准的JS代码，我认为还可以.也许不是吗?

1. On my new controller, it failed to fetch the .json file when I used the $http.get() syntax. It only started to fetch it successfully when I changed the syntax to use the $http({method: 'GET', url: ''}) style. Why I had to change it is really confusing to me. I have all my controllers stored in the same .js file and my older ones use the $http.get() fine, while my newer one fails.
2. I included a $console.log($scope.bags) after setting $scope.bags to the data that was fetched from the .json file. In my chrome console, it shows that it fetched the .json file fine. It correctly returned my .json file with all the data intact. But when I try to use the data in my html, it's just blank.
3. For testing, I set a $scope.message = "it works" inside the $http.success function. When I use {{$scope.message}} in the html, it displays the message correctly. This leads me to believe I'm using the $scope correctly (my understanding of $scope is still pretty limited). So what is boggling is that the .json is being correctly fetched (as I can see in my console), and the html can display the $scope.message but can't use the $scope.data from the .json.
4. Lastly, all those random var lines in the controller's code was just a way for me to grab the part of the URL after the last "/". It's using just standard JS code, which I think is okay. Maybe it's not?

任何帮助或有识之士将不胜感激.如果您需要其他任何有帮助的信息，请告诉我！

Any help or insight regarding this would be greatly appreciated. Please let me know if you need any other information that'd be helpful for this!

以下是.json文件的内容(根据要求):

Here's the .json file contents below (as requested):

[
    {
        "id": "n1-black",
        "title": "n°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，然后才能使用它.

Just a guess, but you probably need to parse the JSON before you can use it.

尝试一下:

$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!";
}); 

这篇关于AngularJS-无法在视图中访问检索到的JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！