CODEWITHSUNDEEP
javascriptangularjsjsontwitter-bootstrap-3
user8084218
user8084218

Reputation: 23

Unable to render navigation menu in angular 1 using nested json data

I want to implement a navigation bar using json data which is fetched by angular service. I ave my service and controller working great, but I am unable to render the nested json data into my view. Below is my json data:

{
    "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": [ ]
        }
    ]
}

I am getting all the data in the console successfully, I just want help in rendering the data in the view using ng-repeat.

For reference, below is the controller and Factory Factory:

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

Controller:

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

Thanks.

Upvotes: 0

Views: 109

Answers (2)

Chintan Kotadiya
Chintan Kotadiya

Reputation: 1395

I have produce the same issues in my local and i am getting the error. but i tried to solve it and i have done.

you are using the controller name with camel case. so it's necessary to define use strict; at top of the controller and services JavaScript file.

Here is solution code.

Json Data file : 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
    };
});

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222582

It should be,

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

Upvotes: 1

Related Questions