How to display below JSON in table format using an

Question

[
    {
        "type": "SOLD",

        "count": 2,
        "ldocRange": "No LDOC",
        "brand": "SAL"

    },
    {
        "type": "SOLD",

        "count": 7,
        "ldocRange": "3 - 7",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 6,
        "ldocRange": "3 - 7",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 13,
        "ldocRange": "15+",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 2,
        "ldocRange": "No LDOC",
        "brand": "SAL"

    },
    {
        "type": "SOLD",

        "count": 1,
        "ldocRange": "8 - 14",
        "brand": "SAL"

    },
    {
        "type": "SOLD",

        "count": 2,
        "ldocRange": "15+",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 20,
        "ldocRange": "8 - 14",
        "brand": "SAL"

    }
]

Hi all, I am getting the above JSON from my rest service and want to display this result in a table using angularjs.My problem is I want to display the details in a table in a different way like below:- 0 1-2 3-7 8-14 15+ No LDOC Total STOCK SOLD

The data is dynamical ,it can vary in values. Please show me an approach. Thank you

I need to display in this table view

<table class="toggle-table">
<th style="background:none; border:0px;">&nbsp;</th>
<th>Today</th>
<th>1-2 Days</th>
<th>3-7 Days</th>
<th>8-12 Days</th>
<th>15+ Days</th>
<th>No Build Date</th>
<th>Total</th>
 <tr class="rowToClick">
    <td class="sold-btn">Sold</td>
    <td class="today-red">2</td>
    <td class="today-red">5</td>
    <td class="day-yellow">9</td>
    <td class="day-yellow">12</td>
    <td class="day-green">3</td>
    <td class="day-skyblue">0</td>
    <td class="day-skyblue">31</td>
</tr>
<tr class="rowToClick2">
    <td class="stock-btn">Stock</td>
    <td class="today-red">2</td>
    <td class="today-red">5</td>
    <td class="day-yellow">7</td>
    <td class="day-yellow">3</td>
    <td class="day-green">4</td>
    <td class="day-skyblue">0</td>
    <td class="day-skyblue">30</td>
</tr>
<tr class="total">
    <td>&nbsp</td>
    <td class="red-max">4</td>
    <td class="red-max">10</td>
    <td class="yellow-max">13</td>
    <td class="yellow-max">15</td>
    <td class="green-max">12</td>
    <td class="skyblue-max">0</td>
    <td class="skyblue-max">61</td>
</tr> 

Answer 1

You can use the normal table syntax plus angular's ng-repeat directive to loop through your array until it suits your needs:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.data = [
    {
        "type": "SOLD",

        "count": 2,
        "ldocRange": "No LDOC",
        "brand": "SAL"

    },
    {
        "type": "SOLD",

        "count": 7,
        "ldocRange": "3 - 7",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 6,
        "ldocRange": "3 - 7",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 13,
        "ldocRange": "15+",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 2,
        "ldocRange": "No LDOC",
        "brand": "SAL"

    },
    {
        "type": "SOLD",

        "count": 1,
        "ldocRange": "8 - 14",
        "brand": "SAL"

    },
    {
        "type": "SOLD",

        "count": 2,
        "ldocRange": "15+",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 20,
        "ldocRange": "8 - 14",
        "brand": "SAL"

    }
];
}

table tr td {
  border: 1px solid black;
  padding: 5px;
}

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

<div ng-app="myApp">
  <table ng-controller="MyCtrl">
    <tr ng-repeat="obj in data">
      <td>{{obj.type}}</td>
      <td>{{obj.count}}</td>
      <td>{{obj.ldocRange}}</td>
      <td>{{obj.brand}}</td>
    </tr>
  </table>
</div>