Creating a table based on json/object javascript

Question

Hi I want to create a table(school timetable) based on a dummydata which is in json object format. The object looks like below.

this._days=[
     {
           "day": "",
           "config": {}
        },

        {
           "day": "Monday",
           "config": {
               'timing': [
                   {'time': '9:00AM-10:00AM', 
                   'schedule': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}
                   },
                   {'time': '10:00AM-11:00AM', 
                   'schedule': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}
                   },
                   {'time': '11:00AM-11:30AM', 
                   'schedule': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}
                   },
                   {'time': '12:00PM-12:30PM', 
                   'schedule': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}
                   }
                ]
            }
        },
        {
           "day": "Tuesday",
           "config": {
               'timing': [
                   {'time': '9:00AM-10:00AM', 
                   'schedule': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}
                   },
                   {'time': '10:00AM-11:00AM', 
                   'schedule': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}
                   },
                   {'time': '11:00AM-11:30AM', 
                   'schedule': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}
                   },
                   {'time': '12:00PM-12:30PM', 
                   'schedule': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}
                   }
                ]
            }
        },
    ...

Based on the dummydata I want to create a table, so that even if the size the object increases(ex: saturday class or extra time) the table should auto adjust. The table should look like a normal school time table with days headers and time on the left. I created a basic table with hardcoded values,

<table width="100%" align="center" height=100%;>
        <tr class="day">
            <th>Time</th>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thrusday</th>
            <th>Friday</th>
            <th>Saturday</th>
        </tr>
        <tr class="time">
            <th>10:00 - 11:00</th>
                <td>Physics-1</td>
                <td>English</td>
                <td></td>
                <td>Chemestry-1</td>
                <td>Alzebra</td>
                <td>Physical</td>
        </tr>

        <tr class="time">
            <th>11:00 - 12:00</th>
                <td>Math-2</td>
                <td>Chemestry-2</td>
                <td>Physics-1</td>
                <td>Hindi</td>
                <td>English</td>
                <td>Soft Skill</td>
        </tr>

        <tr class="time">
            <th>12:00 - 01:00</th>
                <td>Hindi</td>
                <td>English</td>
                <td>Math-1</td>
                <td>Chemistry</td>
                <td>Physics</td>
                <td>Chem.Lab</td>
        </tr>

        <tr class="time">
            <th>01:00 - 02:00</th>
                <td>Cumm. Skill</td>
                <td>Sports</td>
                <td>English</td>
                <td>Computer Lab</td>
                <td>Header</td>
                <td>Header</td>

        </tr>

        <tr class="time">
            <th>02:00 - 03:00</th>
                <td>Header</td>
                <td>Header</td>
                <td>Header</td>
                <td>Header</td>
                <td>Header</td>
                <td>Header</td>
        </tr>
    </table>

I have tried something like this

<div>
    <table style="width:100%; height:200px;">
        <tr>
            <th *ngFor="let row of _days" style="background: grey; color:white"> 
                <h3><b>{{row.day}}</b></h3>
            </th>
        </tr>
        <tr *ngFor="let row of _days">
            <td style="background: grey;color:white">
                <h3><b>{{row.config.timing[row].time}}</b></h3>
            </td>
        </tr>
    </table>
</div>

How to achieve this in javascript or Angular 2 (typescript)? Thanks in advance guys

I have tried something like this. <div> // <table style="width:100%; height:200px;"> // <tr> // <th *ngFor="let row of _days" style="background: grey; color:white"> // <h3><b>{{row.day}}</b></h3> // </th> // </tr> // <tr *ngFor="let row of _days"> // <td style="background: grey;color:white"> // <h3><b>{{row.config.timing[row].time}}</b></h3> // </td> // </tr> // </table> // </div> — blackdaemon
– blackdaemon, Commented Apr 5, 2017 at 1:36

Shiva Prasad · Accepted Answer · 2017-04-05 07:46:45Z

1

you can use primeng datatable in angular 2.

In your module use

import {DataTableModule,SharedModule} from 'primeng/primeng';

In HTML give

  <p-dataTable [value]="cars">
    <p-column field="vin" header="Vin"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="brand" header="Brand"></p-column>
    <p-column field="color" header="Color"></p-column>
</p-dataTable>

in component

public cars: Car[];

constructor(private http: Http) { }

ngOnInit() {
    this.http.get('data.json')
    .map(res => res.json())
    .subscribe(data => this.cars = data,
                err => console.log(err),
                () => console.log('Completed'));
}
}

You may make use of PrimeNG datatable in Angular2 https://www.primefaces.org/primeng/#/datatable

edited Apr 5, 2017 at 7:46

answered Apr 5, 2017 at 5:56

Shiva Prasad

661 silver badge9 bronze badges

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

3 Comments

Martin Schneider Over a year ago

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

Shiva Prasad Over a year ago

Sure, will include essential code too @MartinSchneider.

blackdaemon Over a year ago

Hi Shiva. Aware of primeng datatable. Actually I tried to include primeng's schedule component. Which is exactly how a timetable looks like. But since I cant afford using jquery i didnt used.

Collectives™ on Stack Overflow

Creating a table based on json/object javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related