CODEWITHSUNDEEP
javascriptangularjsjson
Kuajia
Kuajia

Reputation: 31

How to display in a table this json

I need help to display this json in a table... the problem is that ng-repeat can't be used in this case.

    {
"dows": [
    {
        "dow": 1,
        "times": [
            {
                "open": "09:00:00",
                "close": "12:00:00",
            },
            {
                "open": "14:00:00",
                "close": "16:30:00",
            }
        ]
    },
    {
        "dow": 2,
        "times": [
            {
                "open": "09:00:00",
                "close": "12:30:00",
            },
            {
                "open": "14:00:00",
                "close": "19:45:00",
            }
        ]
    }
    .
    .
    .
}

every dow represent a <td> in html, and every elements of the times array, is a <tr> inside the the dow.

This is how I want it look https://i.sstatic.net/Zcado.jpg

Upvotes: 1

Views: 50

Answers (2)

Canet Robern
Canet Robern

Reputation: 1069

Maybe it's too late to answer, but if you couldn't solve your problem yet,

then this fiddle can help you.

<tr ng-repeat="dow in dowArr track by dow.dow">

And if you want more information about ng-repeat,

refer below links.

Official document of Angularjs - ngRepeat

https://docs.angularjs.org/api/ng/directive/ngRepeat

Document of w3cschools.com - ngRepeat

https://www.w3schools.com/angular/ng_ng-repeat.asp

Upvotes: 1

steven.gissubel
steven.gissubel

Reputation: 71

Depending on which Angular you are using, you could first push this data into an array in your component...

Only based on the snippet you supplied...

Something like:

var hello = []; //or hello: Array<any> = []; etc...
for(let h in dow.dows){
    hello.push(dow.dows[h])
}

Store the variable globally. This way, You can use 

<div *ngFor="let dow of hello">
  <h2>{{dow.dow}}</h2>
  <ng-container *ngFor="let time of dow.times">
    <p>Time Open: {{time.open}}</p>
    <p>Time Close: {{time.close}}</p>
  </ng-container>
</div>

Again, I am only going based off the information supplied and not knowing which angular you are working with...

But hopefully this will help to some degree.

Upvotes: 0

Related Questions