angular looping json nested data using angular ngFor

Question

I need to load json data in two dropdowns. This is my data

timeslots: [
  {
    "hour": "10",
    "slotArr": ["00", "10", "20", "50"]
  },
  {
    "hour": "11",
    "slotArr": ["10", "30", "50"]
  },
  {
    "hour": "01",
    "slotArr": ["00", "10", "20", "30", "40", "50"]
  }
]

I tried to loop this using below code. But did not work

<select class="form-control" [(ngModel)]="checkin.hours" name="hours">
  <option *ngFor="let x of timeslots" [value]="x.hour">
    {{x.hour}}
  </option>
</select>

I need to load these hour and slotArr data using two dropdowns. How do I do it correctly

tmsbrndz · Accepted Answer · 2021-06-04 10:34:58Z

2

Your object assign is not correct. If you change : to =, code will works fine.

timeslots = [
    {
      hour: '10',
      slotArr: ['00', '10', '20', '50']
    },
    {
      hour: '11',
      slotArr: ['10', '30', '50']
    },
    {
      hour: '01',
      slotArr: ['00', '10', '20', '30', '40', '50']
    }
  ];

edited Jun 4, 2021 at 10:34

answered Jun 4, 2021 at 10:31

tmsbrndz

1,3472 gold badges9 silver badges23 bronze badges

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

1 Comment

Alexis Over a year ago

It's not the structure that is not correct, just the way he assign it to timeslots because he uses : instead of =

Collectives™ on Stack Overflow

angular looping json nested data using angular ngFor

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related