CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Shankar
Shankar

Reputation: 175

Angular js ng-repeat for nested json value

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 needenter image description here

<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"
    }]
}];
});

Upvotes: 1

Views: 288

Answers (6)

Akshay Kalola
Akshay Kalola

Reputation: 196

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>

Upvotes: 0

Imran Ahmad Shahid
Imran Ahmad Shahid

Reputation: 822

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

enter image description here

Upvotes: 0

anoop
anoop

Reputation: 3822

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>

Upvotes: 2

abdoutelb
abdoutelb

Reputation: 1053

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>

Upvotes: 1

Ushma Joshi
Ushma Joshi

Reputation: 459

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>

Upvotes: 2

himanshu
himanshu

Reputation: 208

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

Upvotes: 0

Related Questions