Angularjs table with JSON embedded array

Question

I'm struggling to display this this json with embedded hours array on the front end in a simple table (timetable) with days of the week as columns and hours in rows. if the hour exists (in the json), display AVAILABLE with a green color in the table cell. Starts with "Wednesday 18th" to "Tuesday" 24th skipping "Sunday". A day has 9 hours [9,10,11,12,13,14,15,16,17] from 9am to 5pm.

        $scope.data          = {};
        $scope.data.response = "AVAILABLE";
        $scope.data.calendar = [
                              {
                                "Date": "2016-05-18",
                                "HoursAvailable": [9, 10, 11, 12, 13, 14, 17]
                              },
                              {
                                "Date": "2016-05-19",
                                "HoursAvailable": [9, 10, 11, 12, 13, 14, 15, 16, 17]
                              },
                              {
                                "Date": "2016-05-20",
                                "HoursAvailable": [9, 10, 14, 15, 16, 17]
                              },
                              {
                                "Date": "2016-05-21",
                                "HoursAvailable": [9, 10, 11, 12, 13]
                              },
                              {
                                "Date": "2016-05-23",
                                "HoursAvailable": [13, 14, 15, 16]
                              },
                              {
                                "Date": "2016-05-24",
                                "HoursAvailable": [11, 12, 15, 16, 17]
                              }
                           ];

HTML

<table class="table">
    <thead>
        <tr>
            <th>time</th>
            <th>Wednesday 18th</th>
            <th>Thursday 19th</th>
            <th>Friday 20th</th>
            <th>Saturday 21st</th>
            <th>Monday 23rd</th>
            <th>Tuesday 24th</th>
        </tr>
    </thead>
    <tbody>

      ??

    </tbody>
</table>

Could you show your html where you want to display this array — Jarek Kulikowski
– Jarek Kulikowski, Commented Jul 28, 2017 at 0:23

wbadart · Accepted Answer · 2017-07-28 02:45:08Z

3

You're going to need some check to see if a given hour is present in each day's "hours free" list. It could look something like this:

<tbody>
    <tr ng-repeat="hour in workhours">
        <td>Time: {{hour}}</td>
        <td ng-repeat="entry in calendar">
            {{entry.hours_free.includes(hour) ? 'FREE' : 'BUSY'}}
        </td>
    </tr>
</tbody>

Where $scope.workhours is an array containing the numbers 9 through 17. In your version, you'd want to add an ng-class to the table cell to check that includes condition and apply the green background.

demo

edited Jul 28, 2017 at 2:45

answered Jul 28, 2017 at 1:05

wbadart

3,0211 gold badge18 silver badges29 bronze badges

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

4 Comments

colin_dev256 Over a year ago

any idea how to get the hour back onto $scope.data anyone?

wbadart Over a year ago

how do you mean?

colin_dev256 Over a year ago

for example if I want to pass the hour to a click function via ng-model

wbadart Over a year ago

You pass things to click handlers just like you pass things to any ordinary function. No need to complicate things with ng-model. <td ng-click="select(hour, entry)">...</td> where $scope.select is a function of the selected hour and calendar entry and does whatever the heck you want with them

Collectives™ on Stack Overflow

Angularjs table with JSON embedded array

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related