CODEWITHSUNDEEP
javascripthtmljsonangularjs
Saurabh
Saurabh

Reputation: 940

Table from json with Angularjs

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.

Upvotes: 3

Views: 100

Answers (3)

samsur
samsur

Reputation: 286

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

Upvotes: 0

Anfelipe
Anfelipe

Reputation: 771

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>

Upvotes: 3

Keon Kim
Keon Kim

Reputation: 760

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

Upvotes: 0

Related Questions