Parsing JSON data into table

Question

I have a JSON string like so:

{"In Progress":1,"Re-assigned":0,"Completed":0,"Submitted":1,"Reviewed":0,"Assigned":0,"Unassigned":0,"Draft":1,"In Review":0}

I want to put it into a simple table formatted like so:

<table>
  <thead>
    <tr>
      <th>State Name</th>
      <th>Count</th>
    </tr>
  </thead>

What do I put as the <tr> and <td> classes?

I didnt write this but maybe it'll help you: jsfiddle.net/mjaric/pJ5BR — Deryck
– Deryck, Commented Jul 24, 2014 at 23:52
must be more data than shown, nothing in data relating to states — charlietfl
– charlietfl, Commented Jul 25, 2014 at 0:12
Angularjs does have an ngClass directive, but it has nothing to do with getting data into your view. You don't put anything as the classes. — Alan Wells
– Alan Wells, Commented Jul 25, 2014 at 0:13

craigb · Accepted Answer · 2014-07-25 00:09:04Z

3

Where your $scope looks something like this:

$scope.data = { "In Progress":1,"Re-assigned":0,"Completed":0,"Submitted":1 };

You need to use a slightly different for expression in the ng-repeat:

<tr ng-repeat="(key, val) in data">
    <td>{{ key }}</td>
    <td>{{ val }}</td>
</tr>

see: https://docs.angularjs.org/api/ng/directive/ngRepeat for examples of the alternative repeat expressions you can use. (in this case you are iterating over keys and values on a single object, not over an array of objects as more common case)

answered Jul 25, 2014 at 0:09

craigb

16.9k7 gold badges54 silver badges63 bronze badges

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

Comments

Ed B · Accepted Answer · 2014-07-24 23:53:33Z

-1

I'm not really sure how that JSON object relates to the table that you're trying to create, but normally what you'd do is use the ng-repeat directive to loop through a JSON array like so:

<table>
  <thead>
    <tr>
      <th>State Name</th>
      <th>Count</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="state in states">
      <td>{{ state.StateName }} </td>
      <td>{{ state.Count }} </td>
    </tr>
  </tbody>
</table>

where 'states' in ng-repeat="state in states" refers to the JSON object that you're passing in from your Angular Controller

answered Jul 24, 2014 at 23:53

Ed B

8591 gold badge7 silver badges25 bronze badges

Comments

Shamik · Accepted Answer · 2014-07-25 00:14:03Z

-1

To add to Ed B's answer,

You should reformat the JSON into an array that looks like this: [ {'StateName': 'In Progress', 'Count': 1}, ... ]

You can make this change in this source of the JSON if you have access or parse it in your Angular code. Then, you can create a controller with Angular:

app.controller('StateController', function() { this.states = your_json_array; }); and add the controller to your HTML with <table ng-controller='StateController as stateCtrl'> and <tr ng-repeat='state in stateCtrl.states' as well as the bindings ({{...}}) shown by Ed B.

answered Jul 25, 2014 at 0:14

Shamik

362 bronze badges

2 Comments

craigb Over a year ago

You don't need to reformat the data at all. ng-repeat offers syntax for iterating of the keys and values of an object;

Shamik Over a year ago

Good to know. I would upvote your answer but I'm not allowed because I'm a newbie.

Collectives™ on Stack Overflow

Parsing JSON data into table

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related