Access inner keys in json data in typescript

Question

I have this following object

{
    "Monday": [
        {
            "morning": [
                {
                    "start_time": "02:00",
                    "end_time": "07:30"
                }
            ],
            "afternoon": [
                {
                    "start_time": "02:00",
                    "end_time": "05:00"
                }
            ],
            "evening": [
                {
                    "start_time": "02:30",
                    "end_time": "07:00"
                }
            ]
        }
    ],
    "Tuesday": [
        {
            "morning": [
                {
                    "start_time": "02:00",
                    "end_time": "07:30"
                }
            ],
            "afternoon": [
                {
                    "start_time": "02:00",
                    "end_time": "05:00"
                }
            ],
            "evening": [
                {
                    "start_time": "02:30",
                    "end_time": "07:00"
                }
            ]
        }
    ],
..
}

i want to loop through all object keys and values

for (var prop in this.jsonData) {
  console.log("Key:" + prop);
  console.log("Value:" + this.jsonData[prop]);
}

getting

Key:Monday value : undefined

but i need to access inner object values.

Answer 1

You will need to loop through the inner arrays as well to access the inner object values. Basically, this can be achieved using:

• Object.entries() to get an array of key-value pairs for the outer and inner objects.
• Iterating through the arrays, and
• destructuring to extract the values directly from the objects.

Object.entries(this.jsonData).forEach(([day, dayData]) => {
  console.log("Day:", day);
  const timePeriods = dayData[0];

  Object.entries(timePeriods).forEach(([timePeriod, slots]) => {
    console.log("  Time Period:", timePeriod);

    slots.forEach(({ start_time, end_time }, i) => {
      console.log(`    Slot ${i + 1}`);
      console.log("      Start Time:", start_time);
      console.log("      End Time:", end_time);
    });
  });
});

const jsonData = {
  Monday: [
    {
      morning: [
        {
          start_time: "02:00",
          end_time: "07:30",
        },
      ],
      afternoon: [
        {
          start_time: "02:00",
          end_time: "05:00",
        },
      ],
      evening: [
        {
          start_time: "02:30",
          end_time: "07:00",
        },
      ],
    },
  ],
  Tuesday: [
    {
      morning: [
        {
          start_time: "02:00",
          end_time: "07:30",
        },
      ],
      afternoon: [
        {
          start_time: "02:00",
          end_time: "05:00",
        },
      ],
      evening: [
        {
          start_time: "02:30",
          end_time: "07:00",
        },
      ],
    },
  ],
};

Object.entries(jsonData).forEach(([day, dayData]) => {
  console.log("Day:", day);
  const timePeriods = dayData[0];

  Object.entries(timePeriods).forEach(([timePeriod, slots]) => {
    console.log("  Time Period:", timePeriod);

    slots.forEach(({ start_time, end_time }, i) => {
      console.log(`    Slot ${i + 1}`);
      console.log("      Start Time:", start_time);
      console.log("      End Time:", end_time);
    });
  });
});

---

Edit:

You need to typecast the slots explicitly. Something like:

(slots as { start_time: string; end_time: string }[]).foreach(...)

Typescript playground

Answer 2

Nested Objects Accessing

As we can see the object structure is rather complex, we need to go deep inside all the subobjects, i.e. day and then to time.

To do that, we can write a function:

this.jsonData = {
    "Monday": [
        {
            "morning": [
                {
                    "start_time": "02:00",
                    "end_time": "07:30"
                }
            ],
            "afternoon": [
                {
                    "start_time": "02:00",
                    "end_time": "05:00"
                }
            ],
            "evening": [
                {
                    "start_time": "02:30",
                    "end_time": "07:00"
                }
            ]
        }
    ],
    "Tuesday": [
        {
            "morning": [
                {
                    "start_time": "02:00",
                    "end_time": "07:30"
                }
            ],
            "afternoon": [
                {
                    "start_time": "02:00",
                    "end_time": "05:00"
                }
            ],
            "evening": [
                {
                    "start_time": "02:30",
                    "end_time": "07:00"
                }
            ]
        }
    ],
}


for (var day in this.jsonData) {
  console.log("Day:" + day);
  
  // Accessing the array of schedules for the current day
  var schedules = this.jsonData[day];
  
  // Looping through the array of schedules
  for (var i = 0; i < schedules.length; i++) {
    var schedule = schedules[i];
    
    // Looping through the keys (morning, afternoon, evening)
    for (var timeOfDay in schedule) {
      console.log("Time of day: " + timeOfDay);
      
      // Accessing the array of time slots for the current time of day
      var timeSlots = schedule[timeOfDay];
      
      // Looping through the array of time slots
      for (var j = 0; j < timeSlots.length; j++) {
        var timeSlot = timeSlots[j];
        
        console.log("Start time: " + timeSlot.start_time);
        console.log("End time: " + timeSlot.end_time);
      }
    }
  }
}

Ps: Instead of logging everything, you can add a search key, and find a particular day or time, and you can also save those values somewhere too.