Question

我想使用由角度服务获取的json数据来实现导航栏。我的服务和控制器工作得很好，但是我无法将嵌套的json数据渲染到我的视图中。以下是我的json数据：

{
    "menu": [
        {
            "name": "Electronics",
            "link": "1",
            "sub": [
                {
                    "name": "Mobiles",
                    "link": "1.1",
                    "sub": [
                        {
                            "name": "Samsung",
                            "link": "1.1.1",
                            "sub": null
                        },
                        {
                            "name": "Apple",
                            "link": "1.1.2",
                            "sub": null
                        },
                        {
                            "name": "Motorola",
                            "link": "1.1.3",
                            "sub": null
                        },
                        {
                            "name": "Lenovo",
                            "link": "1.1.4",
                            "sub": null
                        },
                        {
                            "name": "Mi",
                            "link": "1.1.5",
                            "sub": null
                        },
                        {
                            "name": "Micromax",
                            "link": "1.1.6",
                            "sub": null
                        },
                        {
                            "name": "Oppo",
                            "link": "1.1.7",
                            "sub": null
                        },
                        {
                            "name": "Vivo",
                            "link": "1.1.8",
                            "sub": null
                        },
                        {
                            "name": "HTC",
                            "link": "1.1.9",
                            "sub": null
                        }
                    ]
                },
                {
                    "name": "Mobile Accessories",
                    "link": "1.2",
                    "sub": [ ]
                },
                {
                    "name": "Laptop",
                    "link": "1.3",
                    "sub": [ ]
                },
                {
                    "name": "Laptop Accessories",
                    "link": "1.4",
                    "sub": [ ]
                },
                {
                    "name": "Appliances",
                    "link": "1.5",
                    "sub": [ ]
                }
            ]
        },
        {
            "name": "Men",
            "link": "2",
            "sub": [ ]
        },
        {
            "name": "Women",
            "link": "3",
            "sub": [ ]
        },
        {
            "name": "Baby & Kids",
            "link": "4",
            "sub": [ ]
        },
        {
            "name": "Home & Furniture",
            "link": "5",
            "sub": [ ]
        },
        {
            "name": "Books & More",
            "link": "6",
            "sub": [ ]
        }
    ]
}

我成功获取了控制台中的所有数据，我只想帮助使用ng-repeat在视图中呈现数据。

供参考，以下是控制器和工厂的厂：

( function ()
{
    angular.module( "myApp" )
    .factory( "navService", function ( $http )
    {
        function getNavItems()
        {
            return $http.get( '../data/navData.json' );
        };
        return {
            getNavItems: getNavItems
    };
} );
}()

控制器：

( function ()
{
    angular.module( "myApp" )
    .controller( "NavController", function ( $scope, $http, navService )
    {
        navService.getNavItems().then( function ( menu )
        {
            $scope.menu = menu.data;
            console.log( menu.data );
        } );
    } );
} ());

感谢。

Answer 1

应该是，

  navService.getNavItems().then( function ( response)
  {
       $scope.menu = response.data.menu;
  });

Answer 2

我在本地产生了同样的问题，我收到了错误。但我试图解决它，我已经完成了。

您正在使用带驼峰的控制器名称。因此，有必要在控制器和服务JavaScript文件的顶部定义 use strict; 。

这是解决方案代码。

Json数据文件： navData.json

{
    "menu": [
        {
            "name": "Electronics",
            "link": "1",
            "sub": [
                {
                    "name": "Mobiles",
                    "link": "1.1",
                    "sub": [
                        {
                            "name": "Samsung",
                            "link": "1.1.1",
                            "sub": null
                        },
                        {
                            "name": "Apple",
                            "link": "1.1.2",
                            "sub": null
                        },
                        {
                            "name": "Motorola",
                            "link": "1.1.3",
                            "sub": null
                        },
                        {
                            "name": "Lenovo",
                            "link": "1.1.4",
                            "sub": null
                        },
                        {
                            "name": "Mi",
                            "link": "1.1.5",
                            "sub": null
                        },
                        {
                            "name": "Micromax",
                            "link": "1.1.6",
                            "sub": null
                        },
                        {
                            "name": "Oppo",
                            "link": "1.1.7",
                            "sub": null
                        },
                        {
                            "name": "Vivo",
                            "link": "1.1.8",
                            "sub": null
                        },
                        {
                            "name": "HTC",
                            "link": "1.1.9",
                            "sub": null
                        }
                    ]
                },
                {
                    "name": "Mobile Accessories",
                    "link": "1.2",
                    "sub": [ ]
                },
                {
                    "name": "Laptop",
                    "link": "1.3",
                    "sub": [ ]
                },
                {
                    "name": "Laptop Accessories",
                    "link": "1.4",
                    "sub": [ ]
                },
                {
                    "name": "Appliances",
                    "link": "1.5",
                    "sub": [ ]
                }
            ]
        },
        {
            "name": "Men",
            "link": "2",
            "sub": [ ]
        },
        {
            "name": "Women",
            "link": "3",
            "sub": [ ]
        },
        {
            "name": "Baby & Kids",
            "link": "4",
            "sub": [ ]
        },
        {
            "name": "Home & Furniture",
            "link": "5",
            "sub": [ ]
        },
        {
            "name": "Books & More",
            "link": "6",
            "sub": [ ]
        }
    ]
}

<强>的index.html

<html>
    <head>
        <title>Angular js</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
        <script src="app.js"></script>
        <script src="services.js"></script>
    </head>
    <body ng-app="myApp">
        <p>Stackover flow Answer</p>
        <p>Example use $scope out side from controller.</p>
        <div ng-controller="NavController">
            <div class="main_container">
                <div ng-view></div>
            </div>  
        </div>
    </body>
</html>

<强> app.js

"use strict";
var app = angular.module("myApp", []);

app.controller("NavController", function($scope, $http, navService){
    navService.getNavItems().then( function ( menu ){
        $scope.menu = menu.data;
        console.log( menu.data );
    });
});

<强> services.js

"use strict";    
app.factory( "navService", function ( $http ){
    function getNavItems(){
        return $http.get( 'data/navData.json' );
    };
    return {
        getNavItems: getNavItems
    };
});

无法使用嵌套的json数据

2 个答案: