Exploring nested keys within JSON data using TypeScript

Question

Exploring nested keys within JSON data using TypeScript

I am currently working with this object structure

{
    "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 am trying to iterate through all the keys and values of this object

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

However, I am currently facing an issue

Key:Monday value : undefined

I am looking to access the inner object values instead.

javascript json typescript object key

Answer 1

Answer №1

To access the inner object values, looping through the inner arrays is necessary. This can be achieved by:

Object.entries() to obtain 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:

It is necessary to explicitly typecast the slots. For example:

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

Typescript playground

Answer 2

To access the inner object values, looping through the inner arrays is necessary. This can be achieved by:

Object.entries() to obtain 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:

It is necessary to explicitly typecast the slots. For example:

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

Typescript playground

Answer 3

Answer №2

Exploring Nested Objects

The complexity of the object structure requires us to navigate deep within each subobject, such as the hierarchy of days and times.

To achieve this, a function can be created:

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);
      }
    }
  }
}

Note: Instead of simply logging the data, a search key can be implemented to find specific days or times, and these values can also be stored for future use.

Answer 4

Exploring Nested Objects

The complexity of the object structure requires us to navigate deep within each subobject, such as the hierarchy of days and times.

To achieve this, a function can be created:

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);
      }
    }
  }
}

Note: Instead of simply logging the data, a search key can be implemented to find specific days or times, and these values can also be stored for future use.

Exploring nested keys within JSON data using TypeScript

Answer №1

Edit:

Answer №2

Exploring Nested Objects

Similar questions

Unable to get the Express.js Router functioning correctly on my server, even in a basic scenario

What is the best way to incorporate the keydown event into an if/else statement?

Having difficulty entering text into a "Search Input Field" that is a react component in testcafe

I need to access a directory that is outside of my current folder in Express.js

How do you create an AngularJS directive with HTML content?

Using TypeScript to narrow down types within mapped types

Border becomes dashed when dragging and dropping

Substitute all instances of <table> with <div> tags, making sure to include specifications for

Querying for the presence of an ObjectId in an array in Mongoose

Utilizing JQuery to extract information from the Bing Search API in JSON format

Tracking form submissions on Internet Explorer using a bootstrap modal window - a step-by-step guide

Resetting the state of toggle/click states in AJAX and jQuery

Utilize AngularJS ng-repeat directive to refine JSON objects

Refreshing the page causes JavaScript to fail loading

struggling to transfer information from JavaScript to Jade within the Node.js environment

Experiencing issues with creating HTML using JavaScript?

Angular component name constraints - 'the selector [your component name] is not permissible'

Warning from Cytoscape.js: "The use of `label` for setting the width of a node is no longer supported. Please update your style settings for the node width." This message appears when attempting to create

Utilize JavaScript to communicate with the backend server

Typescript and MomentJS integration - What is the data type of the moment() function?