how can i use angularjs iterate a json string

Question

I have a json string like this :

{"age":[459,918],"id":["bizno459","bizno459"],"name":["name459","wrongname459"]}

Now i want to show it using angular js like this :

<table>
<tr>
  <th>column</th>
  <th>value1</th>
  <th>value2<th>
</tr>
<tr>
  <td>age</td>
  <td>459</td>
  <td>918</td>
</tr>
<tr>
  <td>id</td>
  <td>bizno459</td>
  <td>bizno459</td>
</tr>
</table>

The column is dynamic, in this example, there are 3 : age, id, name. In another example, I have two columns: id,name.

How could I achieve this?

Nicholas Thomson · Accepted Answer · 2015-06-29 14:58:12Z

3

You can use JSON.parse to convert the JSON string to an object. After that you can use ng-repeat to iterate over the keys, and then over each value for every key:

function TableCtrl($scope){
  var jsonString = '{"age":[459,918],"id":["bizno459","bizno459"],"name":["name459","wrongname459"]}';
  $scope.data = JSON.parse(jsonString);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
<table ng-controller='TableCtrl'>
<tr ng-repeat='(col, vals) in data'>
  <td>{{col}}</td>
  <td ng-repeat='val in vals track by $index'>{{val}}</td>
</tr>
</table>
  </div>

answered Jun 29, 2015 at 14:58

Nicholas Thomson

5483 silver badges8 bronze badges

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

Comments

arterzatij · Accepted Answer · 2015-06-29 14:52:30Z

1

You can extract the keys of the string that you are getting:

var obj = JSON.parse('{"age":[459,918],"id":["bizno459","bizno459"],"name":["name459","wrongname459"]}');

and then get the actual keys (age, id, name):

var keys = Object.keys(obj);

and finally iterate the keys each key is your firs column, and iterate the array of the key

elements = []
for ( key : keys )  // use js for
   element = [];

   element.push(key)
   for ( value : obj[key] )
       element.push(value)

   elements.push(element)

so with this you have an 2d array easy to iterate with angular

answered Jun 29, 2015 at 14:52

arterzatij

827 bronze badges

Collectives™ on Stack Overflow

how can i use angularjs iterate a json string

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related