Loop through a JavaScript object that contains an array as well as nested objects

My task involves managing a video timeline that includes multiple videos, and my goal is to add popups for each video.

I am working on ensuring that the popups will display when the corresponding video plays. If there are multiple objects in the array, I want to cycle through them before continuing with the video.

Although I have attempted to access the objects entries and iterate over them, I am encountering the issue of receiving both entries instead of just one.

let popups = {
  0: [{
      type: 'alert',
      text: 'Alert text',
    },
    {
      type: 'warning',
      text: 'Warning text',
    },
  ],
  1: [{
    type: 'caution',
    text: 'Caution text',
  }, ],
};

Answer №1

To address your query, it seems like you are looking to implement a nested foreach loop:

let popups = [
  [
     {
        type: 'alert',
        text: 'Alert text',
     },
    {
    type: 'warning',
        text: 'Warning text',
    },
],
  [
        {
            type: 'caution',
            text: 'Caution text',
        },
    ],
];

// Display all objects
popups.forEach((popup) => popup.forEach((entry) => console.log(entry)))

Answer №2

To work with the popups object, begin by iterating through it using the Object.entries() method available in JavaScript.

let displayedPopups = [];
Object.entries(popups).forEach(([key, value]) => {
    value.forEach(innerValue => displayedPopups.push(innerValue))
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Converting Text from a Streamed XML-Like File into CSV: A Step-by-Step Guide

I have log files that contain C++ namespace artifacts (indicated by the double colons ::) and XML content embedded within them. After loading and displaying the logs in a browser application, the content has been separated from the Unix timestamps like so: ...

Ensure that the initial section of the page spans the full height of the browser, while all subsequent sections have a

I have a website composed of various blocks with different heights, all extending to full width. My goal is to make the first block the full height and width of the browser window, while keeping the other blocks at a set height as seen on this site: After ...

Is there a way to remove data from both a JSON file and an HTML document?

Currently, I am facing a challenge with my code. I am unsure how to implement the functionality to delete a row when clicking on the X button and retrieve the unique ID of that particular row to append it to the URL. Unfortunately, finding the correct meth ...

Working with AngularJS: Implementing a Service in a Controller

A service has been developed in AngularJS, but it is not being utilized in the controller. Service.js var appService = angular.module("appService", []); appService.service("bddService", function() { var bdds = bdd; this.getBdds = function(){ ...

CSS switch status toggle

Here's my code for a toggle switch from . I'm trying to change the label before the switch/checkbox to display "checked" or "not checked" based on the toggle state. When I click on the label, it changes the switch but not the text. JavaScript: ...

Ways to boost an array index in JavaScript

I recently developed a JavaScript function that involves defining an array and then appending the values of that array to an HTML table. However, I am facing an issue with increasing the array index dynamically. <script src="https://cdnjs.cloudflare. ...

In what way does the map assign the new value in this scenario?

I have an array named this.list and the goal is to iterate over its items and assign new values to them: this.list = this.list.map(item => { if (item.id === target.id) { item.dataX = parseFloat(target.getAttribute('data-x')) item.da ...

Clicking on a list item in React's material design will illuminate the item, marking it

I have 2 panels with a list group on each panel, following material design guidelines. Concern: When clicking the first list-item on panel 1, it does not get selected and change to style = "success", or highlight the selected item. The same issue occurs ...

At what point is the rendering process of ng-switch completed?

I am currently utilizing ui-router and facing a challenge in instantiating a widget that requires a DOM element specified by its id as a parameter. The specific DOM element is nested within a <div ng-switch>, and I need to ensure the widget construct ...

Store the user's link for future reference and quickly navigate to the TransferPage in 3 seconds. Then, return

After a user clicks on any button, they will be redirected to the Transfer Page for 3 seconds. Then, they will automatically return to the link they originally clicked on. Schematic: https://i.sstatic.net/dU30F.png HTML: https://i.sstatic.net/UOldi.p ...

Using " " to split a name into two lines is not being recognized

My issue involves the display of tab names in two lines within multiple tabs. You can view the demonstration here. I attempted to use the \n character while setting the tab name but it was not recognized. Any suggestions on how to achieve this? Here ...

Ways to prompt a window resize event using pure javascript

I am attempting to simulate a resize event using vanilla JavaScript for testing purposes, but it seems that modern browsers prevent the triggering of the event with window.resizeTo() and window.resizeBy(). I also tried using jQuery $(window).trigger(' ...

Storing data values from a specific object key into an array in Vue: Step-by-step guide

Just dipping my toes into the world of Vue framework here. I managed to create a selectable table that stores data in an object. I want this function to run in the background, so I figured it should be in the computed section. The object structure is as fo ...

What is the best way to incorporate a gratitude note into a Modal Form while ensuring it is responsive?

Currently, I have successfully created a pop-up form, but there are two issues that need fixing. The form is not responsive. After filling/submission, the form redirects to a separate landing page for another fill out. Expected Outcome: Ideally, I would ...

Identifying Inaccurate Device Date Using JavaScript

Is there a way to detect if the device's date is inaccurate using javascript? (For example, displaying an alert if the current date is 2016/6/16 but the device date is 2016/6/15) ...

Is the Await keyword failing to properly pause execution until the promise has been fulfilled?

I'm currently working on manipulating a variable within an async function, and I've noticed that the variable is being returned before the completion of the data.map function below. Even though I have the await keyword in place to pause the code ...

Tips on when to display the "Email Confirmation" input text box only after updating the old email

Oh no!! Yes, that's exactly what I desire! I've been facing obstacles in trying to understand how to display the "Email Confirm" input text-box ONLY when the old email has been updated. Can someone point out where I might have gone wrong? :( ...

Is the HTTP request from the browser being recorded?

When sending an HTTP request using fetch to website A from the Chrome console on website B, is it possible for website B to track any information about that request, or is it strictly client-side? In other words, can website B detect this action? Thank yo ...

Setting default values for route parameters in JavaScript

I'm looking to streamline my JavaScript code by simplifying it. It involves passing in 2 route parameters that are then multiplied together. My goal is to assign default values to the parameters if nothing is passed in, such as setting both firstnum ...

Node.js is raising an error regarding strict mode, despite the fact that Babel 6 preset es2015 is being used, which

When working with node js, I encountered an error message stating uncaughtException: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode, despite using babel 6 es2015 preset which should include use strict. My pro ...