Impossible de rendre le menu de navigation en angulaire 1 en utilisant des données json imbriquées

Question

Je souhaite implémenter une barre de navigation en utilisant les données json qui sont récupérées par le service angulaire. Mon service et mon contrôleur fonctionnent très bien, mais je ne peux pas afficher les données json imbriquées dans ma vue. Ci-dessous Mes données 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": [ ] 
     } 
    ] 
} 

Je reçois toutes les données dans la console avec succès, je veux juste aider à rendre les données dans la vue à l'aide ng-répétition.

Pour référence, ci-dessous est le contrôleur et l'usine usine:

(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); 
     }); 
    }); 
}()); 

Merci.

Answer 1

Il devrait être,

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

Answer 2

J'ai produire dans mon local, les mêmes questions et je reçois l'erreur. mais j'ai essayé de le résoudre et j'ai fait.

Vous utilisez le nom du contrôleur avec boîtier en chameau. il est donc nécessaire de définir use strict; en haut du contrôleur et du fichier JavaScript de services.

Voici le code de la solution.

Json fichier de données: 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 
    }; 
});