access items in a nested list in angularJS

Question

I am new to AngularJS and i need your help. I have created a JSON file which consists of a list of items inside another list. I want to access the items in the second list but I don't know how. I have searched all day in the Internet but I hardly found anything useful. Please help me. Below is my code:

categoryItems.json

[  
   {  
      "$id":"1",
      "name":"Business",
      "cat":[  
         {  
            "cname":"CyberSecurity",
            "img":"img3_1.jpg",
            "cat_kurs":"7-course specialization",
            "txt":"Rice University"
         },
         {  
            "cname":"Google Cloud Platform for Systems Operations",
            "img":"img3_2.jpg",
            "cat_kurs":"6-course specialization",
            "txt":"University of California"
         },
         {  
            "cname":"Data Security",
            "img":"img3_1.jpg",
            "cat_kurs":"7-course specialization",
            "txt":"Rice University"
         }
      ]
   },
   {  
      "$id":"2",
      "name":"Foreign Language",
      "cat":[  
         {  
            "cname":"Data Security",
            "img":"img3_1.jpg",
            "cat_kurs":"7-course specialization",
            "txt":"Rice University"
         },
         {  
            "cname":"Google Cloud",
            "img":"img3_2.jpg",
            "cat_kurs":"3-course specialization",
            "txt":"University of California"
         }
      ]
   }
]

script.js

var myItemsApp = angular.module('myItemsApp', []);

myItemsApp.factory('itemsFactory', ['$http', function($http){
  var itemsFactory ={
    itemDetails: function() {
      return $http(
      {
        url: "categoryItems.json",
        method: "GET",
      })
      .then(function (response) {
        return response.data;
        angular.forEach(data.itemDetails, function(item) {
        });
        });
      }
    };
    return itemsFactory;

}]);


myItemsApp.controller('ItemsController', ['$scope', 'itemsFactory', function($scope, itemsFactory){
  var promise = itemsFactory.itemDetails();

    promise.then(function (data) {
        $scope.itemDetails = data;
        console.log(data);
    });
    $scope.select = function(item) {
      $scope.selected = item;
    };
    $scope.selected = {};
}]);

index.html

<!DOCTYPE html>
<html ng-app="myItemsApp">

<head>
  <meta charset="utf-8" />
  <title>Test</title>

 <!-- <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />-->


  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
        <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen"/> 
  <script src="js/angular.min.js"></script>
  <script src="js/angular.js"></script>

  <script src="script.js"></script>
  <style>
span.el{
    background-color:#85929E;
    font-size: xx-small;
    font-color: #FDFEFE;

    width: 60px;
}
span.txt{
font-size:xx-small;
}
div.cat{
background-color:#F2F3F4  ;
}
</style>
</head>

<body>
  <div ng-controller="ItemsController">

    <div class="row">
      <div class="col-md-4">
        <div class="panel panel-default">
          <ul class="list-group">
            <a class="list-group-item" ng-click="select(item)" ng-repeat="item in itemDetails">{{item.name}}</a>
          </ul>
        </div>
      </div>

      <div class="col-md-8">
        <div class="panel panel-default" style="width: 70%">
          <div class="panel-heading">{{selected.name}}</div>
           <div class="panel-body">
           <div  ng-repeat="subcat in item.cat ">
                {{subcat.cname}}


        </div>
      </div>
    </div>
  </div>
  </div>
</body>
</html>

Please HELP ME.

Harry Miller · Accepted Answer · 2017-02-03 16:42:42Z

1

Looks like you need todo another ng-repeat on the sub categories.

<div class="col-md-8" ng-show="selected.name.length">
        <div class="panel panel-default" style="width: 70%">
          <div class="panel-heading">{{selected.name}}</div>
          <div class="panel-body">
            <div ng-repeat="subcat in itemDetails | filter:{name:selected.name}">
              <div ng-repeat="cat in subcat.cat">
                {{cat.cname}}
              </div>
            </div>
          </div>
        </div>

Have a look at this example ive mocked up for you

answered Feb 3, 2017 at 16:42

Harry Miller

441 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rajat Chandak · Accepted Answer · 2017-02-03 15:24:07Z

0

You need to deserialize the response using angular.fromJson

more reference: https://docs.angularjs.org/api/ng/function/angular.fromJson

answered Feb 3, 2017 at 15:24

Rajat Chandak

1313 bronze badges

Collectives™ on Stack Overflow

access items in a nested list in angularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related