Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote -2 down vote favorite 
[
    {
        "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>

share|improve this question

closed as too broad by jadarnel27, Qantas 94 Heavy, Kevin Brown, Chris Spittles, Wayne Ellery Feb 13 '15 at 14:02

There are either too many possible answers, or good answers would be too long for this format. Please add details to narrow the answer set or to isolate an issue that can be answered in a few paragraphs.If this question can be reworded to fit the rules in the help center, please edit the question.
up vote 2 down vote

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>

share|improve this answer
    
can u pls see my updated question and provide me an answer – Angular_10 Feb 12 '15 at 13:55
    
Sorry I don't get it. Are you asking for a html table markup? – DonJuwe Feb 12 '15 at 14:05
    
yes I want to display in the above manner which I mentioned in my question – Angular_10 Feb 13 '15 at 5:35
    
just build your html markup until it fits your needs based on my example. Your array does not even have all the data you want to display. – DonJuwe Feb 13 '15 at 10:54

Not the answer you're looking for? Browse other questions tagged or ask your own question.