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

Answer 1

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']
    }
  ];