CODEWITHSUNDEEP
javascriptangularjsmultidimensional-array
xw48hf
xw48hf

Reputation: 447

How to properly format JSON data in table using angularjs?

I'm trying to create table to show data received from API. The data is on JSON format and needs to shown on table using AngularJS. I'm able to retrive the required data on view but I'm not able to properly format that in tables. The code is in plunker here: https://plnkr.co/edit/GZtWlx5aDWvsseSs9ugW?p=preview

View

<body ng-app="ShopOpeningHrs">
<div class="container" ng-controller="ScheduleCtrl">
    <table>
        <thead>
        <tr>
            <th>Sunday</th>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
            <th>Saturday</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="schedule in singledayschedule">
            <td>{{ schedule.morning }}</td>
            <td>{{ schedule.evening }}</td>
        </tr>
        </tbody>
    </table>
</div>

Angular

var app = angular.module("ShopOpeningHrs", []);
   app.controller("ScheduleCtrl", function($scope, $http) {
    $http.get('data.json').
    success(function(data, status, headers, config) {
        $scope.schedule = data[0];
        $scope.singledayschedule = [];

        angular.forEach($scope.schedule, function(value, key) {
            angular.forEach(value, function(value, key) {
                $scope.singledayschedule.push(value);
            });
        });
    console.log($scope.singledayschedule);
    }).
    error(function(data, status, headers, config) {
    // log error
    });
});

Upvotes: 1

Views: 465

Answers (1)

dfsq
dfsq

Reputation: 193261

I think you just need to use two ngRepeat loops:

  <tbody>
    <tr ng-repeat="(shop, schedule) in singledayschedule">
      <td>{{ shop }}</td>
      <td ng-repeat="(day, times) in schedule">
        <div>{{ times.morning }}</div>
        <div>{{ times.evening }}</div>
      </td>
    </tr>
  </tbody>

Demo: https://plnkr.co/edit/CYSqQYFhENQfeeYRFTvp?p=preview

Upvotes: 1

Related Questions