Display complex json in Angularjs

Question

I would like to display complex json with bollean values, strings and even with arrays. How can I do that?

$scope.options = {    
    "option_1" : "some string",    
    "option_2" : true,
    "option_3" : [1.123456789, 0.123548912, -7.156248965],
    "option_4" : null,    
    "option_5" : [1234.45678, 75.142012] 
}

I use something like this : but I have problem with arrays :

<ul ng-repeat="(key, value) in options">     
    <li>{{key}}</li>     
    <span>{{value}}</span> 
</ul>

I would like display something like table with keys like headings and values under appropriate keys like this :

option_1     option_2    option_3       ... 
some string  true        1.123456789                          
                         0.123548912                         
                        -7.156248965

Here's a plunker plnkr.co/edit/OZFQXDYn1mCZkXEA5G03?p=preview — Marcus Höglund
– Marcus Höglund, Commented Jun 12, 2017 at 10:29

Hadi · Accepted Answer · 2017-06-12 10:23:57Z

It should be like this.

app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
  $scope.isArray = angular.isArray;
  $scope.options = {
    "option_1": "some string",
    "option_2": true,
    "option_3": [1.123456789, 0.123548912, -7.156248965],
    "option_4": null,
    "option_5": [1234.45678, 75.142012]
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <table class="table table-striped table-bordered table-hover">
      <thead>
        <tr>
          <th ng-repeat="(key, value) in options">
            {{ key }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td ng-repeat="(key, value) in options">
            {{isArray(value) ? '': value}}
            <table ng-if="isArray(value)">
              <tr ng-repeat="v in value">
                <td>
                  {{v}}
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </tbody>
    </table>

  </div>
</div>

Collectives™ on Stack Overflow

Display complex json in Angularjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related