Push to array after each iteration to make one large array using Javascript

Question

I have a scenario where I have an async request that is pushing data to a child react component. When I log in the "data" in the component, I get back multiple arrays one by one by one...Ideally I would like to avoid rewriting the request in the parent component and just push each array iteration to one large array. Is this possible?

What I currently get

[
    {
       "dates":"Thu, 05/12, 6:25 AM",       
    },
    {
       "dates":"Thu, 05/12, 12:45 PM",       
    }
 ]

 [
    {
       "dates":"Thu, 05/12, 6:25 AM",       
    },
    {
       "dates":"Thu, 05/12, 12:45 PM",       
    },
    {
        "dates":"Thu, 05/12, 2:00 PM",       
     },
     {
        "dates":"Thu, 05/12, 9:00 PM",       
     },
 ]

 [
    {
       "dates":"Thu, 05/12, 6:25 AM",       
    },
    {
       "dates":"Thu, 05/12, 12:45 PM",       
    },
    {
        "dates":"Thu, 05/12, 2:00 PM",       
     },
     {
        "dates":"Thu, 05/12, 9:00 PM",       
     },
     {
        "dates":"Aired on 05/11/22, 5:20 AM",       
     },
     {
        "dates":"Aired on 05/11/22, 12:45 PM",       
     },
     {
        "dates":"Aired on 05/11/22, 1:00 PM",       
     },
 ]

 [
    {
        "dates":"Thu, 05/12, 2:00 PM",       
     },
     {
        "dates":"Thu, 05/12, 9:00 PM",       
     },
     {
        "dates":"Aired on 05/11/22, 5:20 AM",       
     },
     {
        "dates":"Aired on 05/11/22, 12:45 PM",       
     },
     {
        "dates":"Aired on 05/11/22, 1:00 PM",       
     },
 ]

 ....

My desired result would be:

[
    {
       "dates":"Thu, 05/12, 6:25 AM",       
    },
    {
       "dates":"Thu, 05/12, 12:45 PM",       
    },
    {
        "dates":"Thu, 05/12, 6:25 AM",       
     },
     {
        "dates":"Thu, 05/12, 12:45 PM",       
     },
     {
         "dates":"Thu, 05/12, 2:00 PM",       
      },
      {
         "dates":"Thu, 05/12, 9:00 PM",       
      },
      {
        "dates":"Thu, 05/12, 6:25 AM",       
     },
     {
        "dates":"Thu, 05/12, 12:45 PM",       
     },
     {
         "dates":"Thu, 05/12, 2:00 PM",       
      },
      {
         "dates":"Thu, 05/12, 9:00 PM",       
      },
      {
         "dates":"Aired on 05/11/22, 5:20 AM",       
      },
      {
         "dates":"Aired on 05/11/22, 12:45 PM",       
      },
      {
         "dates":"Aired on 05/11/22, 1:00 PM",       
      },
      {
        "dates":"Thu, 05/12, 2:00 PM",       
     },
     {
        "dates":"Thu, 05/12, 9:00 PM",       
     },
     {
        "dates":"Aired on 05/11/22, 5:20 AM",       
     },
     {
        "dates":"Aired on 05/11/22, 12:45 PM",       
     },
     {
        "dates":"Aired on 05/11/22, 1:00 PM",       
     }
 ]

This results in an infinite loop:

for (let i = 0; i < data.length; i++) {
   if (data[0]) data.push(data)
   console.log(data[i])
}

Screenshot of console log in child component.

What's the structure of the stairs? Is it a big multi-dimensional array of multiple status of objects? — code
– code, Commented May 11, 2022 at 20:40
Put all the arrays inside a big array, then bigArray.flatMap(i => i). — code
– code, Commented May 11, 2022 at 20:48

fjc · Accepted Answer · 2022-05-11 20:48:33Z

1

If you collect all arrays in one large array (e.g. const arr = []; to define the large array, then arr.push(incomingArray); whenever you get one of the arrays):

With modern JS runtimes, you can use Array.flatMap:

const arr = [["a", "b"], ["c", "d"]];
console.log(arr.flatMap(entry => entry));

With older ones, you can build your own flatmap implementation using reduce quite easily:

const arr = [["a", "b"], ["c", "d"]];
console.log(arr.reduce((aggregated, entry)=> [...aggregated, ...entry]));

Update: full example:

const collectionArray = [];

function onArrayArrived(arr) {
    collectionArray.push(arr);
}

function getFlattenedCollectionArray() {
   return collectionArray.flatMap(entry => entry);
}

onArrayArrived(["a", "b"]);
onArrayArrived(["c", "d"]);
onArrayArrived(["e", "f"]);

console.log(getFlattenedCollectionArray());

answered May 11, 2022 at 20:48

fjc

5,85521 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user992731 Over a year ago

Still no dice. Having an async request in my parent is still resulting in separate arrays

Collectives™ on Stack Overflow

Push to array after each iteration to make one large array using Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related