Angular js ng-repeat for nested json value

Question

I would like to print table in HTML using angular js with below data and expected output format. Could you guys please help me out with solution.

Below is the output i need

<table ng-app="testApp" ng-controller="testController">
 <tr ng-repeat-start="test in testData">
    <td rowspan="{{ test.data.length }}">{{ test.timeline }}</td>

    <td>{{ test.data[0] }}</td>
</tr>


<tr ng-repeat-end ng-repeat="value in test.data.slice(1)">
        <td>{{ value }}</td>
    </tr>

angular.module('testApp',[])
.controller('testController',function($scope){
    $scope.testData=[{
    "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z ",
    data: [{
        "story ": "Update ",
        "component ": "Component 1"
    }, {
        "story ": "Update 2 ",
        "component ": "Component 2"
    }]


}, {
    "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z ",
    data: [{
        "story ": "Update",
        "component ": "Component 3 "
    }, {
        "story ": "Update 2 ",
        "component ": "Component 2"
    }]
}];
});

Ushma Joshi · Accepted Answer · 2017-06-14 10:16:41Z

angular.module('testApp',[])
.controller('testController',function($scope){
    $scope.testData=[{
      "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z",
      data: [{
          "story": "Update",
          "component": "Component 1"
          }, {
          "story": "Update 2 ",
          "component": "Component 2"
          }]
      }, {
      "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z",
      data: [{
          "story": "Update",
          "component": "Component 3"
      },{
          "story": "Update 2 ",
          "component": "Component 2"
      }]
  }];
});

table, th, td {
    border: 1px solid black;
}
.no-border table {
    border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testController">
<table>
 <tr>
  <td>TimeLine</td>
  <td>Story</td>
  <td>Component</td>
 </tr>
 <tr ng-repeat="test in testData">
    <td>{{ test.timeline }}</td>
    <td class="no-border">
    <table>
    <tr ng-repeat="item in test.data">
      <td>{{ item.story }}</td>
    </tr>
    </table>
    </td>
    <td class="no-border">
    <table>
    <tr ng-repeat="item in test.data">
      <td>{{ item.component }}</td>
    </tr>
    </table>
    </td>
   
 </tr>
</table>
</div>

anoop · Accepted Answer · 2017-06-14 10:24:19Z

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
  $scope.testData = [{
    timeline: "2017 - 05 - 23 T10: 09: 06.896 Z ",
    data: [{
      story: "story1 ",
      component: "Component 1"
    }, {
      story: "story2 ",
      component: "Component 2"
    }]
  }, {
    timeline: "2017 - 05 - 23 T10: 09: 06.896 Z ",
    data: [{
      story: "story1",
      component: "Component 3 "
    }, {
      story: "story2 ",
      component: "Component 2"
    }]
  }];
});

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table class="myTable">
    <tr>
      <th><b>TimeLine</b></th>
      <th><b>Story</b></th>
      <th><b>Component</b></th>
    </tr>
    <tr ng-repeat="test in testData">
      <td>{{ test.timeline }}</td>
      <td>
        <table>
          <tr ng-repeat="value in test.data">
            <td> {{ value.story }}</td>
          </tr>
        </table>
      </td>
      <td>
        <table>
          <tr ng-repeat="value in test.data">
            <td>{{ value.component }}</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

abdoutelb · Accepted Answer · 2017-06-14 10:16:59Z

1

in your html try this

<table ng-app="testApp" ng-controller="testController">
 <tr ng-repeat="test in testData">
    <td rowspan="{{ test.data.length }}">{{ test.timeline }}</td>

    <td ng-repeat="value in test.data">
     {{ value.story }}</td>
      <td ng-repeat="value in test.data">
     {{ value.component }}</td>
</tr>
    </table>

edited Jun 14, 2017 at 10:16

answered Jun 14, 2017 at 9:39

abdoutelb

1,0631 gold badge15 silver badges34 bronze badges

1 Comment

abdoutelb Over a year ago

@Shankar i forget to add .data check now

himanshu · Accepted Answer · 2017-06-14 10:08:52Z

0

Try this

       <table>
         <tr ng-repeat="test in testData">
              <td>{{ test.timeline }}</td>
              <td>
                <div ng-repeat="value in test.data">
                   {{value.story}}
               </div>
             </td>
        </tr>
       </table>

Check the result in plunker https://plnkr.co/edit/gx3IaFtUSJiLRS5jutqp?p=preview

answered Jun 14, 2017 at 10:08

himanshu

2083 silver badges16 bronze badges

Comments

Imran Ahmad Shahid · Accepted Answer · 2017-06-14 10:30:29Z

0

you can use this one, format your table according to your requirement. you are writing object incorrectly just correct your object

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in records">

<td>
{{x.timeline}}
</td>

<td>

<table>
<tr ng-repeat="y in x.data">

<td>{{y.story}}</td>
<td>{{y.component}}</td>

</tr>

</table>

</td>

</tr>

</table>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.records = [{
    "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z ",
    "data": [{
        "story": "Update ",
        "component": "Component 1"
    }, {
        "story": "Update 2 ",
        "component": "Component 2"
    }]


}, {
    "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z ",
    "data": [{
        "story": "Update",
        "component": "Component 3 "
    }, {
        "story": "Update 2 ",
        "component": "Component 2"
    }]
}];
});
</script>

</body>
</html>

here is output of this code

edited Jun 14, 2017 at 10:30

answered Jun 14, 2017 at 9:44

Imran Ahmad Shahid

8229 silver badges33 bronze badges

3 Comments

Shankar Over a year ago

x.data is not coming properly. I mean <td>{{y.story}}</td> <td>{{y.component}}</td> returning empty.

Imran Ahmad Shahid Over a year ago

did you use the data which i have written in my example @Shankar

Imran Ahmad Shahid Over a year ago

@Shankar I have added output of the code that i have written

Akshay Kalola · Accepted Answer · 2017-06-14 10:51:16Z

For expected output You need to write HTML like

angular.module('testApp', [])
  .controller('testController', function($scope) {
    $scope.testData = [{
      "timeline": "2017 - 04 - 23 T10: 09: 06.896 Z ",
      "data": [{
          "story": "Update 1",
          "component": "Component 1"
        },
        {
          "story": "Update 2 ",
          "component": "Component 2"
        }
      ]
    }, {
      "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z ",
      "data": [{
          "story": "Update 3",
          "component": "Component 3 "
        },
        {
          "story": "Update 4 ",
          "component": "Component 2"
        }
      ]
    }];
  });

td,
th {
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table ng-app="testApp" ng-controller="testController" style="border:1px solid black">
  <thead>
    <tr>
      <th>Timeline</th>
      <th>Story</th>
      <th>Component</th>
    </tr>
  </thead>
  <tbody ng-repeat="test in testData">
    <tr ng-repeat="data in test.data">
      <td rowspan="{{test.data.length}}" ng-hide="$index>0">
        {{test.timeline}}
      </td>
      <td>{{data.story}}</td>
      <td>{{data.component}}</td>
    </tr>
  </tbody>
</table>

Collectives™ on Stack Overflow

Angular js ng-repeat for nested json value

6 Answers 6

Comments

Comments

1 Comment

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related