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

问题描述

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

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

让我们从控制器开始:

munyApp.controller('productController', ['$scope', '$location', '$http',函数($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 = 数据；控制台日志($scope.bags)；$scope.message = "它有效！";});

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

这里有一小块 HTML 用于控制器:

{{bags.id}}{{包['id']}}

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

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

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

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

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

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

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 代码，我认为这没问题.也许不是?

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

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

<预><代码>[{"id": "n1-黑色","title": "n&deg;1 (黑色)","description": "纹理小牛皮手提包\\nBLACK\\n001",图片": ["图像/手提包/细节/n1-black-1.jpg","图像/手提包/细节/n1-black-2.jpg","图像/手提包/细节/n1-black-3.jpg",图像/手提包/细节/n1-black-4.jpg"]}]

解决方案

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

试试这个:

$http({method: 'GET', url: 'handbags/n1-black-details.json'}).success(function(data) {$scope.bags = JSON.parse(data);控制台日志($scope.bags)；$scope.message = "它有效！";});

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.

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.

Lets start with the controller:

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

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.

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>

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.

Here's an example of another controller that IS working:

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

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}}.

Some curious things that I ran into:

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!

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"
        ]
    }
]

解决方案

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

Try this:

$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屋！