How to fill table with JSON data that may contain empty cells (AngularJS)

Question

I have the following JSON data that contains the names and salaries of employees across a number of days (from 1 to 5). What I would like to do is place this data within a HTML table using AngularJS so it looks like the required table shown below.

JSON Data:

[{
        name: "John",
        salaryBreakdown: [{
                day: 1,
                salary: 32
            }, {
                day: 2,
                salary: 40
            }, {
                day: 5,
                salary: 105
            }
        ]
    }, {
        name: "Nick",
        salaryBreakdown: [{
                day: 1,
                salary: 27
            }, {
                day: 4,
                salary: 82
            }
        ]
    }, {
        name: "Bob",
        salaryBreakdown: [{
                day: 2,
                salary: 55
            }, {
                day: 3,
                salary: 80
            }
        ]
    }
]

Required Table:

Name     Day1     Day2     Day3     Day4     Day5
-------------------------------------------------
John       32       40        -        -      105
Nick       27        -        -       82        -
Bob         -       55       80        -        -

The issue I'm facing now is that there are cells within the table that will be empty as shown above (e.g. days 3 and 4 for John). Now I could solve this by including an object for each day within the salaryBreakdown array for every employee, e.g. for John:

salaryBreakdown: [{day: 1, salary: 32}, {day: 2, salary: 40}, {day: 3, salary: 0}, {day: 4, salary: 0}, {day: 5, salary: 105}]

Unfortunately, this would require additional coding to create a lot of unnecessary data that would either be stored in a database or generated for each request simply for visualization purposes. I am trying to find a way so that I can create the required view without altering the JSON data. The HTML code I have at the moment is shown below, although I understand how it works and why it doesn't exactly meet my requirements.

Is there another way using AngularJS to achieve the required table view?

Current HTML (incorrect):

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Day1</th>
            <th>Day2</th>
            <th>Day3</th>
            <th>Day4</th>
            <th>Day5</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="employee in jsonData">
            <td ng-bind="employee.name"></td>
            <td ng-repeat="item in employee.salaryBreakdown | orderBy: 'day'" ng-bind="item.salary"></td>
        </tr>
    </tbody>
</table>

Current Table (incorrect):

Name     Day1     Day2     Day3     Day4     Day5
-------------------------------------------------
John       32       40      105
Nick       27       82
Bob        55       80

Not really an angular issue as much is it's a matter of using javascript to loop through the arrays and fill the holes before passing to view. OR... flatten the salaryBreakdown arrays into single objects that uses day as keys — charlietfl
– charlietfl, Commented Jan 10, 2018 at 0:55

Chris Riebschlager · Accepted Answer · 2018-01-11 15:00:46Z

1

You could create a new array with blank objects inserted like this:

data.forEach(person => {
  person.salaryBreakdownTransformed = [];
  for (let i = 1; i < 6; i++) {
    let bd = person.salaryBreakdown.find(b => {
      return b.day === i;
    }) || {"day": i, "salary": 0};
    person.salaryBreakdownTransformed.push(
      bd
    );
  }
});

Here's a fiddle to demonstrate it: https://jsfiddle.net/L1184yqu/16/

edited Jan 11, 2018 at 15:00

answered Jan 10, 2018 at 1:28

Chris Riebschlager

1,3331 gold badge8 silver badges12 bronze badges

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

1 Comment

dat3450 Over a year ago

Just a small adjustment required: instead of || {}; it would need to be || {"day": i, "salary": 0}; since I am sorting by day.

charlietfl · Accepted Answer · 2018-01-10 01:18:10Z

Could flatten the salary arrays into single objects with days as keys and iterate over an array of day numbers and use each day to look upthat person's salary

angular
  .module('app', [])
  .controller('myCtrl', function($scope) {
    $scope.data = angular.copy(data);
    $scope.data.forEach(o => o.salaryBreakdown = o.salaryBreakdown.reduce((a, c) => {
      a[c.day] = c;
      return a
    }, {}))

    
    $scope.days = [1,2,3,4,5]
  })

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


<table ng-app="app" ng-controller="myCtrl">
    <thead>
        <tr>
            <th>Name</th>
            <th>Day1</th>
            <th>Day2</th>
            <th>Day3</th>
            <th>Day4</th>
            <th>Day5</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="employee in data">
            <td ng-bind="employee.name"></td>
            <td ng-repeat="day in days" ng-bind="employee.salaryBreakdown[day].salary ||0 "></td>
        </tr>
    </tbody>
</table>






<script>
var data =[{
        name: "John ",
        salaryBreakdown: [{
                day: 1,
                salary: 32
            }, {
                day: 2,
                salary: 40
            }, {
                day: 5,
                salary: 105
            }
        ]
    }, {
        name: "Nick ",
        salaryBreakdown: [{
                day: 1,
                salary: 27
            }, {
                day: 4,
                salary: 82
            }
        ]
    }, {
        name: "Bob ",
        salaryBreakdown: [{
                day: 2,
                salary: 55
            }, {
                day: 3,
                salary: 80
            }
        ]
    }
]
</script>

Collectives™ on Stack Overflow

How to fill table with JSON data that may contain empty cells (AngularJS)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related