How to Loop two JSON objects using nested ng-repeat?

Question

I have two json objects one is Jobs

[  
  {  
    "code":"Maxo- 1033",
    "title":"Test",
    "deleted_by":2,
    "updated_at":"2017-08-23 06:32:42"
  },
  {  
    "code":"Maxo- 1034",
    "title":"Test",
    "deleted_by":2,
    "updated_at":"2017-08-24 04:55:10"
  }
]

other is headers

[  
  "code",
  "title",
  "deleted_by",
  "updated_at"
]

I want to print jobs data using headers data like the below code.

<tbody>
   <tr ng-repeat = 'job in jobs'>
       <td ng-repeat = 'column in headers'> 
           @{{job.column}}  //i want job.code for first iteration and like                          
       </td>
  </tr>
</tbody>

Expected Table Output: code title deletedby updated_at Maxo Test 2 2017-08-23 06:32:42

Can you also add your output ? How exactly you want. Like what should it print on screen ? — Rakesh Chand
– Rakesh Chand, Commented Aug 24, 2017 at 5:18

Azad · Accepted Answer · 2017-08-24 05:25:25Z

you can do it by nested ng-repeats

var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
  $scope.jobs = [{
    "code": "Maxo- 1033",
    "title": "Test",
    "deleted_by": 2,
    "updated_at": "2017-08-23 06:32:42"
  }, {
    "code": "Maxo- 1034",
    "title": "Test",
    "deleted_by": 2,
    "updated_at": "2017-08-24 04:55:10"
  }];
  $scope.headers = [
    "code",
    "title",
    "deleted_by",
    "updated_at"
  ];
});

table, th, td {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="testApp" ng-controller="testCtrl">
  <table>
    <tbody>
      <tr>
        <th ng-repeat="header in headers">{{header}}</th>
      </tr>
      <tr ng-repeat="job in jobs">
        <td ng-repeat="header in headers">{{job[header]}}</td>
      </tr>
    </tbody>
  </table>
</body>

Vivz · Accepted Answer · 2017-08-24 05:40:19Z

3

You can do this with nested ng-repeat

var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
    $scope.jobs = [{
        "code": "Maxo- 1033",
        "title": "Test",
        "deleted_by": 2,
        "updated_at": "2017-08-23 06:32:42"
    }, {
        "code": "Maxo- 1034",
        "title": "Test",
        "deleted_by": 2,
        "updated_at": "2017-08-24 04:55:10"
    }];
    $scope.headers = ["code", "title", "deleted_by", "updated_at"];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="testApp" ng-controller="testCtrl">
    <table>
        <thead>
            <tr>
                <th ng-repeat="header in headers">{{header| uppercase }}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="job in jobs">
                <td ng-repeat="header in headers"> {{job[header]}} </td>
            </tr>
        </tbody>
    </table>
</body>

edited Aug 24, 2017 at 5:40

answered Aug 24, 2017 at 5:19

Vivz

6,6282 gold badges19 silver badges34 bronze badges

2 Comments

Vivz Over a year ago

There is no problem if the above fields are dynamic. You need to fetch the dynamic values from API call and update job array

Sandeep Garapati Over a year ago

yeah,but even jobs array changes it may get one more field added or deleted

Jenny · Accepted Answer · 2017-08-24 05:28:24Z

See this No need of Nested NgRepeat :

var app = angular.module('App',[]);
app.controller('Ctrl',function($scope){
   $scope.jobs = [{"code":"Maxo- 1033","title":"Test","deleted_by":2,"updated_at":"2017-08-23 06:32:42"},{"code":"Maxo- 1034","title":"Test","deleted_by":2,"updated_at":"2017-08-24 04:55:10"}];
$scope.Headers = [  
  "code",
  "title",
  "deleted_by",
  "updated_at"
];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="App" ng-controller="Ctrl">
    <table>
    <thead>   
     <tr >  
          <th ng-repeat="h in Headers">{{h}} </th>
      </tr>
    </thead>
        <tbody>        
            <tr ng-repeat="job in jobs">            
                <td> {{job.code}} </td>
                <td> {{job.title}} </td>
                <td> {{job.deleted_by}} </td>
                <td> {{job.updated_at}} </td>
            </tr>
        </tbody>
    </table>
</body>

jesusverma · Accepted Answer · 2017-08-24 05:26:18Z

Here you have to play with table structure of html.

You can do like this:

JS

$scope.headerArr = ["code",
                    "title",
                    "deleted_by",
                    "updated_at"
                   ]

$scope.childObj = [{"code":"Maxo- 1033","title":"Test","deleted_by":2,"updated_at":"2017-08-23 06:32:42"},
                   {"code":"Maxo- 1034","title":"Test","deleted_by":2,"updated_at":"2017-08-24 04:55:10"}]

HTML

<table>
        <thead>
         <tr >
             <th ng-repeat = 'item in headerArr'> 
             {{item}}
             </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat = 'item in childObj'>
          <td >
            {{item.code}}
          </td>
          <td >
            {{item.title}}
          </td>
          <td >
            {{item.deleted_by}}
          </td>
           <td >
            {{item.updated_at}}
          </td>
        </tr>
      </tbody>
     </table>

Hope this demo will help you.

Rakesh Chand · Accepted Answer · 2017-08-24 05:26:32Z

1

Try this

<tbody>
  <tr ng-repeat = "job in jobs">
      <td ng-repeat="header in headers">
           {{job[header]}}
      </td>
  </tr>
</tbody>

answered Aug 24, 2017 at 5:26

Rakesh Chand

3,1131 gold badge25 silver badges43 bronze badges

Collectives™ on Stack Overflow

How to Loop two JSON objects using nested ng-repeat?

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related