CODEWITHSUNDEEP
angularjsjsonhtml-tabledisplay
Angel Silva
Angel Silva

Reputation: 375

Properly display JSON in table angular

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?

Upvotes: 3

Views: 956

Answers (4)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27242

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>

Upvotes: 0

Tim Harker
Tim Harker

Reputation: 2417

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

enter image description here

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

Upvotes: 1

Matthew Cawley
Matthew Cawley

Reputation: 2818

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>

Upvotes: 1

Pankaj Parkar
Pankaj Parkar

Reputation: 136194

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>

Upvotes: 0

Related Questions