Show json complex in Angularjs
I would like to display complex json with bollean values, strings and even arrays. How can i do this?
$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 am using something like this: but I have a problem with arrays:
<ul ng-repeat="(key, value) in options">
<li>{{key}}</li>
<span>{{value}}</span>
</ul>
I would like to display something like a table with keys such as headers and values under the appropriate keys:
option_1 option_2 option_3 ...
some string true 1.123456789
0.123548912
-7.156248965
+3
source to share
1 answer
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>
+4
source to share