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

1

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

edited Feb 15, 2017 at 4:07

answered Feb 14, 2017 at 23:53

Tim Harker

2,4171 gold badge17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tim Harker Over a year ago

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

1

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>

answered Feb 14, 2017 at 20:28

Matthew Cawley

2,8281 gold badge10 silver badges19 bronze badges

Comments

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

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related