Table from json with Angularjs

Question

I created an Angularjs app which fetches the json data through REST APIs. I need to get the data in the table from the following json format.

{

"121":  {
    "buy":56,
    "sell":52,
    "customerId":63
    }

"122":
    {
    "buy":46,
    "sell":62,
    "customerId":13
    }
}

Here 121 and 122 are the transaction ids. I am trying to get the data in the table in the following format but I am not able to exactly figure out how to display the transaction ids and their corresponding details.

Here is the table format:

Transaction ID | Customer ID| Buy | Sell |

Please advise.

Please show what you tried. There are lots of tutorials around to learn this from — charlietfl
– charlietfl, Commented Oct 22, 2015 at 0:15
Glad to help, you can mark the answer as correct then, cheers! — Anfelipe
– Anfelipe, Commented Oct 23, 2015 at 21:12

Anfelipe · Accepted Answer · 2015-10-22 00:35:25Z

3

The key here is to do your ng-repeat with the "(key,value) in collection" flavour of the ng-repeat directive.

Your table would be something like>

<table>
  <thead>
    <tr>
      <th>Transaction ID</th>
      <th>Customer ID</th>
      <th>Buy</th>
      <th>Sell</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="(id, t) in transactions">
      <td>{{ id }}</td>
      <td>{{ t.customerId }}</td>
      <td>{{ t.buy }}</td>
      <td>{{ t.sell }}</td>
    </tr>
  </tbody>
</table>

answered Oct 22, 2015 at 0:35

Anfelipe

77112 silver badges21 bronze badges

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

1 Comment

jroot Over a year ago

My answer too, but you got here first :). Here's a fiddle to complete it... jsfiddle.net/jroetman/y0Ltjr8r

Keon Kim · Accepted Answer · 2015-10-22 00:25:22Z

0

http://codepen.io/JakeBernstein65/pen/NqMpmM

<table class="table table-bordered">
        <thead>
            <tr>
                <td>Item</td>
                <td>Brand</td>
                <td>Quantity</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in main.shoppingList">
                <td>{{ item.name }}</td>
                <td>{{ item.brand }}</td>
                <td>{{ item.quantity }}</td>
            </tr>
        </tbody>
    </table>

this might answer your question

answered Oct 22, 2015 at 0:25

Keon Kim

7603 gold badges12 silver badges27 bronze badges

Comments

samsur · Accepted Answer · 2015-10-22 01:21:24Z

Here is an example of how you can accomplish this. You can create a model called customerData in your controller and use it in the view

<table ng-table class="table">
  <thead>
  <tr>

    <th>Transaction Id</th>
    <th>Cutomer Id</th>
    <th>Buy</th>
    <th>Sell</th>

  </tr>
  </thead>
<tr ng-repeat="customer in customerData">
    <td data-title="'TransactionId'">{{customer.transactionId}}</td>
    <td data-title="'CustomerId'">{{customer.customerId}}</td>
     <td data-title="'Buy'">{{customer.buy}}</td>
      <td data-title="'Sell'">{{customer.sell}}</td>
</tr>
</table>

The controller will take your JSON array and perform the necessary projection so that you can use it on the ng-repeat

var app = angular.module('app', ['ngRoute']);
app.controller('HomeController',['$scope', function($scope) {
    var customerDataFromService={
      "121":  {
          "buy":56,
          "sell":52,
          "customerId":63
          },

      "122":
          {
          "buy":46,
          "sell":62,
          "customerId":13
          }
      };
      $scope.customerData=[];
      angular.forEach(customerDataFromService,function(value,key){
        var customer = {'transactionId' : key, 'customerId' :   value.customerId,'buy': value.buy,'sell':value.sell}
     $scope.customerData.push(customer);
      });
  }]);

Here is a plunk with complete solution http://plnkr.co/edit/muNiXRISj5XCc6qCmGFh?p=preview

Collectives™ on Stack Overflow

Table from json with Angularjs

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related