Properly display JSON in table angular

Question

I have an API which return me a JSON array:

{"i":11,"j":12,"iterationNumber":9,"results":[12,6,3,10,5,16,8,4,2,1]}

How can I make a table in angular, so the data is displayed correctly? Currently I have this:

current table

My html code is:

<table class="table table-striped " ng-show="tableR">
        <thead>
          <tr>
            <th>i Value</th>
            <th>j Value</th>
            <th>iternation Number Value</th>
            <th>results</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="x in data">
            <td>{{x.i}}</td>
            <td>{{x.j}}</td>
            <td>{{x.iterationNumber}}</td>
            <td>{{x.results}}</td>
          </tr>
        </tbody>
      </table>

Can you help me fix the last column, so instead of displaying all the values in one row, make it display it into different rows?

results is an array, you need to repeat it like you did with data — Sterling Archer
– Sterling Archer, Commented Feb 14, 2017 at 20:19
@AngelSilva Did you have any luck getting this to work? Can I help in any other way? — Tim Harker
– Tim Harker, Commented Feb 17, 2017 at 20:22

Tim Harker · Accepted Answer · 2017-02-15 04:07:46Z

I believe this might be closer to what Angel Silva is after.

HTML:

  <body ng-controller="MainCtrl">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>i Value</th>
          <th>j Value</th>
          <th>iternation Number Value</th>
          <th>results</th>
        </tr>
      </thead>
      <tbody ng-repeat="x in data">
        <tr ng-repeat="r in x.results">
          <td>{{x.i}}</td>
          <td>{{x.j}}</td>
          <td>{{x.iterationNumber}}</td>
          <td>{{r}}</td>
        </tr>
      </tbody>
    </table>
  </body>

JavaScript/AngularJS:

app.controller('MainCtrl', function($scope) {
  $scope.data = [{"i":11,"j":12,"iterationNumber":9,"results":[12,6,3,10,5,16,8,4,2,1]}];
});

Here's a link to a working Plunker, http://plnkr.co/edit/NrnFI17P932KckzXRcF4?p=preview

No worries. Do you mind making it as the"accepted" answer? meta.stackexchange.com/questions/5234/…

Matthew Cawley · Accepted Answer · 2017-02-14 20:28:33Z

Use a second ng-repeat within an <ul> (unordered list):

<table class="table table-striped " ng-show="tableR">
    <thead>
      <tr>
        <th>i Value</th>
        <th>j Value</th>
        <th>iternation Number Value</th>
        <th>results</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="x in data">
        <td>{{x.i}}</td>
        <td>{{x.j}}</td>
        <td>{{x.iterationNumber}}</td>
        <td>
            <ul>
                <li ng-repeat="r in x.results">
                    {{ r }}
                </li>
            </ul>
        </td>
      </tr>
    </tbody>
  </table>

Pankaj Parkar · Accepted Answer · 2017-02-14 20:25:12Z

0

You could create an array of columns which could be named as columns. Loop over columns to render td's data with current x

Controller

$scope.data = {"i":11,"j":12,"iterationNumber":9,"results":[12,6,3,10,5,16,8,4,2,1]};
$scope.columns = Object.key($scope.data)

Markup

<tr ng-repeat="x in data">
    <td ng-repeat="column in columns">{{x[column]}}</td>
</tr>

edited Feb 14, 2017 at 20:25

answered Feb 14, 2017 at 20:19

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Comments

Rohìt Jíndal · Accepted Answer · 2017-02-15 18:25:28Z

You can try array.join() method to join all the elements of an array into a string.

DEMO

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

myApp.controller('MyCtrl',function($scope) {
    $scope.tableR = true;
    $scope.data = [{
    "i":11,
    "j":12,
    "iterationNumber":9,
    "results":[12,6,3,10,5,16,8,4,2,1]
    }];
});

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

<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="table table-striped " ng-show="tableR">
        <thead>
          <tr>
            <th>i Value</th>
            <th>j Value</th>
            <th>iternation Number Value</th>
            <th>results</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="x in data">
            <td>{{x.i}}</td>
            <td>{{x.j}}</td>
            <td>{{x.iterationNumber}}</td>
            <td>{{x.results.join()}}</td>
          </tr>
        </tbody>
      </table>
</div>

Collectives™ on Stack Overflow

Properly display JSON in table angular

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Related