How to display below JSON in table format using angularjs [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

Want to improve this question? Guide the asker to update the question so it focuses on a single, specific problem. Narrowing the question will help others answer the question concisely. You may edit the question if you feel you can improve it yourself. If edited, the question will be reviewed and might be reopened.

Closed 10 years ago.

Improve this 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>

DonJuwe · Accepted Answer · 2015-02-12 13:09:16Z

2

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>

answered Feb 12, 2015 at 13:09

DonJuwe

4,5634 gold badges37 silver badges60 bronze badges

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

4 Comments

ngCoder Over a year ago

can u pls see my updated question and provide me an answer

DonJuwe Over a year ago

Sorry I don't get it. Are you asking for a html table markup?

ngCoder Over a year ago

yes I want to display in the above manner which I mentioned in my question

DonJuwe Over a year ago

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.

Collectives™ on Stack Overflow

How to display below JSON in table format using angularjs [closed]

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related