Angular Access Nested JSON object using Ng Repeat

Angular Access Nested JSON object using Ng Repeat

Today, We want to share with you Angular Access Nested JSON object using Ng Repeat.
In this post we will show you AngularJs Nested json ng repeat Example | Nested Ng-Repeat, hear for we will give you demo and example for implement.
In this post, we will learn about How to access nested json object with nested ng-repeat in AngularJs with an example.

AngularJS supported the ng-repeat js directive that allows to Like as a cycle loop over a Data collection and add 1 eneter element for same or each item.If we some needed to every loop over a new collection and want any simple to add more lates than 1 element (example generate 2 or more rows for a new add single item), we can use directive attributes ng-repeat-start and ng-repeat-end directive

Nested Ng-Repeat on AngularJS Example

in this example to ng-repeat inside another ng-repeat with json.

data-ng-repeat Nested Loop through two dimensional array using angularjs




Learn AngularJS Directive Like as a: ng-app Directive, ng-init Directive, ng-model, ng-repeat Directive, ng-transclude Directive ,etc.

READ :  Angularjs Add Remove Child-Parent HTML Element onclick

<!DOCTYPE html>
<html  ng-app>
<head>
<title>AngularJs Nested json ng repeat Example</title>
<script src="/angular.js"></script>
<script type='text/javascript'>
angular.module('app', []);
function liveCtrl($scope){<!--   w  w w  .infinityknow  .com-->
    $scope.rows = [
        {x: [ 9,8,7,6 ]},
        {x: [ 5,6,7 ]},
        {x: [ 9,10,11,12 ]}
    ];
}
</script>
</head>
<body>
	<h1>AngularJs Nested json ng repeat Example</h1>
  <div ng-app="app">
  <hr/>
    <div ng-controller="liveCtrl">
        <div class="y" data-ng-repeat="y in rows">
            <div class="x" data-ng-repeat="x in y.x">{{x}}</div>
        </div>
    </div>
	  <hr/>
  </div>
</body>
</html>

Data.json

[
  {
    "number": "2018-W45",
    "pmasts": [
      {
        "dow": "1",
        "myissueProductpmast": "Monpmast",
        "jobs": [
          {
            "name": "product",
            "jobs": [
              {
                "name": "prepare breakfast",

              }
            ]
          },
          {
            "name": "work 9-5",

          }
        ]
      },
      {
        "dow": "2",
        "myissueProductpmast": "fripmast",
        "jobs": [
          {
            "name": "product",
            "jobs": [
              {
                "name": "Laptop Master",

              }
            ]
          }
        ]
      }
    ]
  }
]

index.html

<div ng-repeat="week in myData">
   <div ng-repeat="pmast in week.pmasts">
      {{pmast.dow}} - {{pmast.myissueProductpmast}}
      <b>Products:</b><br/> 
       <ul>
         <li ng-repeat="prod in pmast.Products"> 
           {{prod.name}} 
         </li>
       </ul>
   </div>
</div>

index.html

<!DOCTYPE html>
<html ng-app='liveApp'>
<head>
    <title>Nested ng-repeat on AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
var app = angular.module('liveApp', []);
     //liveCtrl Controller define
     app.controller("liveCtrl", function ($scope, bookFactory) {
         $scope.editsomeResult_div = false;
         $scope.get = function (someResult) {
             $scope.my_product_full = someResult;
         }

         $scope.edit = function (subsomeResult) {

             $scope.object = subsomeResult.object;
             $scope.dynemic_add_someResult = subsomeResult.dynemic_add_someResult;
             $scope.name = subsomeResult.name;
             $scope.pricesomeResult = subsomeResult.pricesomeResult;
             $scope.editsomeResult_div = true;
         }
         $scope.Save = function () {
             var subsomeResult = {
                 Date: $scope.object,
                 Time: $scope.dynemic_add_someResult,
                 Day: $scope.name
             };
          
             subsomeResult.ID = $scope.ID;
             $scope.editsomeResult_div = false;
             var saveMSG = bookFactory.update(subsomeResult);
             saveMSG.then(function (messagefromController) {
                 $scope.editsomeResult_div = false;
             });
         }

         $scope.someResult = [{
             date: '2015-02-28',
             time: '15:30',
             day: 'Saturday',
             subsomeResultren: [{
                 object: 'rooms',
                 dynemic_add_someResult: 'complete',
                 name: '1th Person',
                 pricesomeResult: '4500$'
             }]
         },
                  {
                      date: '2015-03-07',
                      time: '08:30',
                      day: 'Saturday',
                     subsomeResultren: [{
                          object: 'yards',
                          dynemic_add_someResult: 'nothing',
                          name: '2th Person',
                          pricesomeResult: '3500$'
                      }]
                  },
                {
                    date: '2015-03-17',
                    time: '16:30',
                    day: 'Tuesday',
                    subsomeResultren: [{
                        object: 'pools',
                        dynemic_add_someResult: 'nothing',
                        name: '3th Person',
                        pricesomeResult: '2500$'
                    }]
                }
         ];
     }
     );

     //Factory
     app.factory("bookFactory", ['$http', function ($http) {

         var urlBase = '/book/orderdetails';
         var bookFactory = {};

         //someResult Save
         bookFactory.update = function (subsomeResult) {
             return $http.put(urlBase + '/' + subsomeResult.ID, subsomeResult)
         }

         return bookFactory;
     }]);</script>
</head>

<body>

    <ul ng-controller="liveCtrl">
        someResult Filter:
        <input type="text" value="Name" ng-model="sample_someResultSearch" />
        <hr/>
		<hr/>
        <div ng-show="editsomeResult_div">
            <table>
                <tr>

                    <td>
                        <input type="text" style="width:93px;" ng-model="object" />
                    </td>


                    <td>
                        <input type="text" style="width:93px;" ng-model="dynemic_add_someResult" />
                    </td>


                    <td>
                        <input type="text" style="width:93px;" ng-model="name" />
                    </td>


                    <td>
                        <input type="text" style="width:93px;" ng-model="pricesomeResult" />
                    </td>

                    <td colspan="2">
                        <input type="button" value="Save" ng-click="Save()" />
                    </td>
                </tr>
            </table>
        </div>
        <br />
        <li ng-repeat="item in someResult | filter:sample_someResultSearch ">
            {{item.date}} - {{item.time}}<br />
            {{item.day}}
            <br /><br />
            <ul>
                <li ng-repeat="subsomeResult in item.subsomeResultren ">
                    object: {{subsomeResult.object}},
                    Note: {{subsomeResult.dynemic_add_someResult}},<br /> Your Order: {{subsomeResult.name}}, pricesomeResult: {{subsomeResult.pricesomeResult}}
                    <input type="button" value="Edit" ng-click="edit(subsomeResult)" />

                </li>
                <hr/>
				 <hr/>
				  <hr/>
            </ul>

        </li>
        <input type="button" value="Get" ng-click="get(someResult)" />
        All hbookstemp of Book:
        <li ng-repeat="hbookstemp in my_product_full">{{hbookstemp.date}}, {{hbookstemp.time}}, {{hbookstemp.day}}</li>

    </ul>

</body>
</html>

Example

READ :  Vuejs Http Get Method with parameters - Vue-Resource Get Request

Example 2

We hope you get an idea about Angular Access Nested JSON object using Ng Repeat
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.

Add a Comment

Your email address will not be published. Required fields are marked *