Display Data from Json Array Using AngularJS

Question

I am trying to display data from JSON array in a table using following code. But all data is displayed in a single row. It should be displayed as each record in each row with grey color for Even and White for odd. But I am making some mistake I am not able to identify it.

CSS Style:

table,td  {
    border: none;
    border-collapse: collapse;
    padding: 5px;
    width:1047px;
    height: 64px;
    left:16px;
    position:relative;
}
table tr:nth-child(odd) {
    background-color: #f1f1f1;
}
table tr:nth-child(even) {
    background-color: #ffffff;
}

My View (It is a partial view which is displayed from index.html):

      <h1 id="title">Shuttle Schedule</h1>
        <table width="100%" cellpadding="4" cellspacing="25" style="margin-top:-118px">
            <thead  align="center">
                <th ng-repeat="row in module.csvInput">{{row.label}}</th>
                <th ng-repeat="row in module.csvInput">{{row.label}}</th>

            </thead>
            <tr align="center" >
                <td ng-repeat="row in module.csvInput" >
                    <div ng-repeat="(id, time) in row.times" ng-if="id <= 8">
                    {{time}}
                    </div>

                </td>
                <td ng-repeat="row in module.csvInput">
                    <div ng-repeat="(id, time) in row.times" ng-if="id > 8">
                        {{time}}
                    </div>

                </td>
            </tr>
        </table>
        <h3 class="noservice">No Service 1:20pm to 2:00pm<br> Driver can make additional runs beyond this schedule if needed.<br>
            D1 is 8910 Ridgeline Blvd. D4 is 8744 Lucent Blvd.</h3>
    </div>

My JSON's Snippet:

{
  "modules": [


    {
      "title": "Shuttle Schedule",
      "feature": "shuttle",
      "order": 4,
      "csvInput": [
        {
          "label": "D1 PickUp",
          "times": [
            "8:00 AM",
            "8:30 AM",
            "9:00 AM",
            "9:30 AM",
            "10:00 AM",
            "10:30 AM",
            "11:00 AM",
            "11:30 AM",
            "12:00 PM",
            "12:30 PM",
            "1:30 PM"
          ]
        },
        {
        "label": "D4 PickUp",
        "times": [
          "7:50 AM",
          "8:20 AM",
          "8:50 AM",
          "9:20 AM",
          "9:50 AM",
          "10:20 AM",
          "10:50 AM",
          "11:20 AM",
          "11:50 AM",
          "12:20 PM",
          "12:50 PM",
          "1:10 PM"
        ]
      }
      ],
      "filter": null,
      "icon": "media/shuttle.svg"
    }
  ],
  "settings": {
    "buildings": 2,
    "floor": 4,
    "timeout": "120 (in seconds)",
    "cssOverride": "custom.css",
    "kiosk_coords": "200,200"
  }
}

My output:

Desired Styling output :

Nothing is displayed if I do like that.

user3923166
– user3923166

2015-11-03 06:36:17 +00:00
Commented Nov 3, 2015 at 6:36 — user3923166
– user3923166, Commented Nov 3, 2015 at 6:36

binariedMe · Accepted Answer · 2015-11-05 04:54:40Z

2

You should put ng-repeat on tr tag not on td tag first. So it should be something like :

<table> <tr ng-repeat="entity in list"><td>{{entity.lable}}</td> 
<td ng-repeat="time in entity.times">{{time}}</td></tr></table>

EDIT : if you want your data to look in html like : entity.label : entity.time entity.label : entity.time ...

Then you should probably do this :

<table> <div ng-repeat="entity in list"><tr ng-repeat="time in entity.times><td ng-class-odd="'grey'" ng-class-even="'white'">{{entity.lable}}</td> 
<td ng-class-odd="'grey'" ng-class-even="'white'">{{time}}</td></tr></div></table>

edited Nov 5, 2015 at 4:54

answered Nov 3, 2015 at 5:27

binariedMe

4,3291 gold badge20 silver badges34 bronze badges

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

7 Comments

user3923166 Over a year ago

Thanks for the Response. But Nothing is displayed if try it. It displays everything in a single row.

binariedMe Over a year ago

desired output given for reference doesn't match the data you have provided. Please show the desired output according to the data and I could help you out.

user3923166 Over a year ago

Desired out put will be similar to the second Image styling wise. Data in D1 and D4 Pickup will be displayed in each rows differently rather than all data in a single row.

binariedMe Over a year ago

Please see the edit section... And rest styling you can always do using ngClassOdd and ngClassEven directives...

user3923166 Over a year ago

I know styling can be done on odd and even rows. It's already applied. But the problem is that all data is displayed in the 2 td of same tr. Rather than 2 td in each different rows(tr).

|

shyam · Accepted Answer · 2015-11-03 06:53:39Z

You need to unroll the data to match the way you want them to be displayed

$scope.module = data.modules[0];
var csvInput = $scope.module.csvInput;
$scope.headers = csvInput.map(x => x.label );
var rows = csvInput.map(x => x.times.slice(0, 8)).concat(csvInput.map(x => x.times.slice(8)));
var n = Math.max.apply(null, rows.map(x => x.length));
$scope.rows = [];
for ( i = 0; i < n; i++ ) {
  $scope.rows[i] = rows.map(x => x[i]);
}

And display that data

<table width="100%" cellpadding="4" cellspacing="25" style="margin-top:-118px">
  <thead align="center">
    <th ng-repeat="row in headers">{{row}}</th>
    <th ng-repeat="row in headers">{{row}}</th>
  </thead>
  <tbody>
    <tr ng-repeat="row in rows">
      <td ng-repeat="col in row track by $index">{{col}}</td>
    </tr>
  </tbody>
</table>

See http://jsfiddle.net/r0005a1t/

Collectives™ on Stack Overflow

Display Data from Json Array Using AngularJS

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related