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