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

问题描述

我只花了最后一小时的搜索和阅读一堆类似计算器的页面，无法找到一个解决方案。我会尝试尽可能的描述，但请让我知道如果我需要提供任何其他细节。

基本上，我试图抓住使用$ HTTP GET一个以.json文件。一旦我得到它，我将其存储在$ scope.bags，然后我的HTML（视图）页面上，我试图访问这些内容如标题，详细信息，图像等使用。

让我们从在控制器启动：

  munyApp.controller（'ProductController的'，['$范围，$位置，$ HTTP，
    功能（$范围，$位置$ HTTP）{
        变量$ url2parse = $ location.path（）;
        变量$ urlSplit = $ url2parse.split（/）;
        变量$ bag2show = $ urlSplit.pop（）;
        变量$ bag2showString =字符串（$ bag2show）;
        的console.log（$ bag2showString）;        $ HTTP（{方法：GET，网址：'手袋/ N1-黑details.json'}）。成功（功能（数据）{
            $ scope.bags =数据;
            的console.log（$ scope.bags）;
            $ scope.message =它工作！
        }）;
 

现在，请忽略随机VAR线。我会到后来，因为我猜它不是与我的问题在这里。

和这里有一小块在 HTML 其中控制器将用于：

 ＆LT; D​​IV ID =detail_large_containerNG控制器=ProductController的＆GT;
    {{bags.id}}
    {{袋['身份证']}}
＆LT; / DIV＆GT;
 

由于某些原因，我不能得到id值显示出来，这应该是N1-黑。

这看起来很简单（这大概是，我与这一切初学者），但这样做的原因是所有令人费解的我的是，我能够做同样的事情其它控制器和它的作品了精细。我复制并粘贴工作控制器来修改，因为这新的一个，它似乎无论出于何种原因无法工作。

这里有另一个控制器 一个例子是工作

  munyApp.controller（'handbagsController'，['$范围，$ HTTP，
    功能（$范围，$ HTTP）{
        $ http.get（'手袋/ bagsfull.json'）。成功（功能（数据）{
            $ scope.bags =数据;
        }）;
}]）;
 

通过这个上面控制器，它抓住了JSON文件很好，我能够通过利用其在HTML页面内容{{bags.somekey}}

有些奇怪的事情，我遇到了：

1. 在我的新的控制器，它失败了，当我使用的 $ http.get（）语法来获取以.json文件。它才开始成功地把它拿来当我改成使用 $ HTTP语法（{方法：GET，网址：''}）的风格。为什么我不得不改变它真的困惑了我。
   我存储在同一个js文件我所有​​的控制器和我的旧的使用$ http.get（）的罚款，而我的新的一个出现故障。


2. 我设置$ scope.bags来，这是从以.json文件中取得数据后，包括一个$的console.log（scope.bags $）。在我的铬控制台，它表明，它获取的以.json文件罚款。它与所有的数据完整正确地回我以.json文件。但是，当我尝试在我的HTML中使用的数据，它只是一片空白。


3. 为了测试，我设置了$ scope.message =它工作的$ http.success函数内。当我在HTML中使用{{$ scope.message}}，它正确地显示消息。这使我相信我正确使用$范围（我的$范围的理解仍然是pretty限制）。那么，什么是令人难以置信的是，以.json被正确获取（如我可以在控制台中看到），而HTML可以显示$ scope.message但不能使用从以.json的$ scope.data。


4. 最后，所有控制器的code的随机变种线只是一个对我来说，在最后/抢URL的一部分的方式。它仅使用标准的JS code，我认为这是好的。也许这不是？

任何有关此帮助或有识之士将不胜AP preciated。请让我知道如果你需要任何其他信息会是对此很有帮助！

下面是低于以.json文件的内容（的要求）：

  [
    {
        ID：N1-黑，
        头衔：N＆安培;度; 1（黑色），
        说明：TOTE织纹小牛皮\\\\ \\\\ nBLACK N001
        图像：
            图像/手袋/信息/ N1-黑1.JPG
            图像/手袋/信息/ N1-黑2.JPG
            图像/手袋/信息/ N1-黑3.JPG
            图像/手袋/信息/ N1-黑4.JPG
        ]
    }
]
 

解决方案

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

试试这个：

  $ HTTP（{方法：GET，网址：'手袋/ N1-黑details.json'}）。成功（功能（数据）{
    $ scope.bags = JSON.parse（数据）;
    的console.log（$ 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屋！