ReactJS How to change from array of arrays to one single array

Question

My problem is that i have that Array:

 [
   {
      "_id":"5f32f3d98fe32813803d32e3",
      "StartdateFormatPL":"11.08.2020, 01:30:00",
      "EndDateFormatPL":"11.08.2020, 02:00:00",
      "Hours":[
         {
            "id":"f1dcc-33f8-b32a-3aaa-7bb1b0fcaa6f",
            "hour":"11.08.2020, 01:30:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"d8cfbd6-148a-8e0a-41d4-614d7fa6875",
            "hour":"11.08.2020, 01:35:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"2e71b4-dcb-fb01-1fa0-8eddc5cbd15",
            "hour":"11.08.2020, 01:40:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"cbe26f3-1af2-81a7-3c0b-8ec4be286f15",
            "hour":"11.08.2020, 01:45:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"2475ddf-e6ee-6df7-d22d-860e8a31053",
            "hour":"11.08.2020, 01:50:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"ad23bc-1506-26da-c272-cfca177565a",
            "hour":"11.08.2020, 01:55:00",
            "isBooked":false,
            "isConfirmed":false
         }
      ],
      "__v":0
   },
   {
      "_id":"5f32f60ecee0dd13987cf6a1",
      "StartdateFormatPL":"11.08.2020, 02:00:00",
      "EndDateFormatPL":"11.08.2020, 02:30:00",
      "Hours":[
         {
            "id":"e2bbb4-615e-7aad-0bfd-c7156c5426",
            "hour":"11.08.2020, 02:00:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"fdd2c8-67da-b517-7f85-8e2612f28",
            "hour":"11.08.2020, 02:05:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"5befec6-2a2d-13b2-324d-cd7e86a7626",
            "hour":"11.08.2020, 02:10:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"5d6cb20-80ad-3e38-a7e7-aa5feb88d37",
            "hour":"11.08.2020, 02:15:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"b2c78-358-6176-666-862bacec408",
            "hour":"11.08.2020, 02:20:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"ef3f5e-b60b-18a1-ac13-8542d48dc28f",
            "hour":"11.08.2020, 02:25:00",
            "isBooked":false,
            "isConfirmed":false
         }
      ],
      "__v":0
   }
]

This is the response from my API. There are two separate objects which contain Hours Array. In short this is an Array and I wonder how I can convert it to one single array connecting them both into one. I am using ReactJS and I will have many arrays not just only two and I want to connect them into single one..

Summing up [Array] = {... [Array1] ...} {... [Array2] ...] and finnally getting Object of : [{ Array1 + Array2 ....}]

Thanks in advance for help.

Expected Result:

"Hours":[
             {
                "id":"f1dcc-33f8-b32a-3aaa-7bb1b0fcaa6f",
                "hour":"11.08.2020, 01:30:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"d8cfbd6-148a-8e0a-41d4-614d7fa6875",
                "hour":"11.08.2020, 01:35:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"2e71b4-dcb-fb01-1fa0-8eddc5cbd15",
                "hour":"11.08.2020, 01:40:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"cbe26f3-1af2-81a7-3c0b-8ec4be286f15",
                "hour":"11.08.2020, 01:45:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"2475ddf-e6ee-6df7-d22d-860e8a31053",
                "hour":"11.08.2020, 01:50:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"ad23bc-1506-26da-c272-cfca177565a",
                "hour":"11.08.2020, 01:55:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"e2bbb4-615e-7aad-0bfd-c7156c5426",
                "hour":"11.08.2020, 02:00:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"fdd2c8-67da-b517-7f85-8e2612f28",
                "hour":"11.08.2020, 02:05:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"5befec6-2a2d-13b2-324d-cd7e86a7626",
                "hour":"11.08.2020, 02:10:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"5d6cb20-80ad-3e38-a7e7-aa5feb88d37",
                "hour":"11.08.2020, 02:15:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"b2c78-358-6176-666-862bacec408",
                "hour":"11.08.2020, 02:20:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"ef3f5e-b60b-18a1-ac13-8542d48dc28f",
                "hour":"11.08.2020, 02:25:00",
                "isBooked":false,
                "isConfirmed":false
             }
          ],
          "__v":0
       }
    ]

Are you looking for a single array of just the Hours array objects concat'ed together? It may help to include an example expected result from the example data snippet included. — Drew Reese
– Drew Reese, Commented Aug 11, 2020 at 20:10
i am using it and receive then : [Array(4), Array(4)] and need to convert it to one object containing all Hours possible to book. — Łukasz Jaworski
– Łukasz Jaworski, Commented Aug 11, 2020 at 20:11

Drew Reese · Accepted Answer · 2020-08-11 20:14:30Z

data.flatMap(({ Hours }) => Hours);

Map the data to arrays of Hours then flatten.

flatMap

The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It is identical to a map() followed by a flat() of depth 1, but flatMap() is often quite useful, as merging both into one method is slightly more efficient.

const data = [
  {
    _id: "5f32f3d98fe32813803d32e3",
    StartdateFormatPL: "11.08.2020, 01:30:00",
    EndDateFormatPL: "11.08.2020, 02:00:00",
    Hours: [
      {
        id: "f1dcc-33f8-b32a-3aaa-7bb1b0fcaa6f",
        hour: "11.08.2020, 01:30:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "d8cfbd6-148a-8e0a-41d4-614d7fa6875",
        hour: "11.08.2020, 01:35:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "2e71b4-dcb-fb01-1fa0-8eddc5cbd15",
        hour: "11.08.2020, 01:40:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "cbe26f3-1af2-81a7-3c0b-8ec4be286f15",
        hour: "11.08.2020, 01:45:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "2475ddf-e6ee-6df7-d22d-860e8a31053",
        hour: "11.08.2020, 01:50:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "ad23bc-1506-26da-c272-cfca177565a",
        hour: "11.08.2020, 01:55:00",
        isBooked: false,
        isConfirmed: false
      }
    ],
    __v: 0
  },
  {
    _id: "5f32f60ecee0dd13987cf6a1",
    StartdateFormatPL: "11.08.2020, 02:00:00",
    EndDateFormatPL: "11.08.2020, 02:30:00",
    Hours: [
      {
        id: "e2bbb4-615e-7aad-0bfd-c7156c5426",
        hour: "11.08.2020, 02:00:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "fdd2c8-67da-b517-7f85-8e2612f28",
        hour: "11.08.2020, 02:05:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "5befec6-2a2d-13b2-324d-cd7e86a7626",
        hour: "11.08.2020, 02:10:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "5d6cb20-80ad-3e38-a7e7-aa5feb88d37",
        hour: "11.08.2020, 02:15:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "b2c78-358-6176-666-862bacec408",
        hour: "11.08.2020, 02:20:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "ef3f5e-b60b-18a1-ac13-8542d48dc28f",
        hour: "11.08.2020, 02:25:00",
        isBooked: false,
        isConfirmed: false
      }
    ],
    __v: 0
  }
];

const hours = data.flatMap(({ Hours }) => Hours);

console.log('hours', hours)

Thanks a lot that saved my time after couple hours of thinking about that problem :] Appreciate that.

jockerThe00 · Accepted Answer · 2020-08-11 20:15:44Z

0

Try the following:

yourOuterArray.map(obj => obj["Hours"]).flat()

The flat array method is new, if your environment does not support it consider using Lodash or Underscore, both have flatten methods.

answered Aug 11, 2020 at 20:15

jockerThe00

1461 silver badge6 bronze badges

Comments

Jimmay · Accepted Answer · 2020-08-11 20:18:39Z

I believe a reducer would get the job done well - you can even use a simple push() if ES6 is not available in your environment

const sample =  [
   {
      "_id":"5f32f3d98fe32813803d32e3",
      "StartdateFormatPL":"11.08.2020, 01:30:00",
      "EndDateFormatPL":"11.08.2020, 02:00:00",
      "Hours":[
         {
            "id":"f1dcc-33f8-b32a-3aaa-7bb1b0fcaa6f",
            "hour":"11.08.2020, 01:30:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"d8cfbd6-148a-8e0a-41d4-614d7fa6875",
            "hour":"11.08.2020, 01:35:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"2e71b4-dcb-fb01-1fa0-8eddc5cbd15",
            "hour":"11.08.2020, 01:40:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"cbe26f3-1af2-81a7-3c0b-8ec4be286f15",
            "hour":"11.08.2020, 01:45:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"2475ddf-e6ee-6df7-d22d-860e8a31053",
            "hour":"11.08.2020, 01:50:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"ad23bc-1506-26da-c272-cfca177565a",
            "hour":"11.08.2020, 01:55:00",
            "isBooked":false,
            "isConfirmed":false
         }
      ],
      "__v":0
   },
   {
      "_id":"5f32f60ecee0dd13987cf6a1",
      "StartdateFormatPL":"11.08.2020, 02:00:00",
      "EndDateFormatPL":"11.08.2020, 02:30:00",
      "Hours":[
         {
            "id":"e2bbb4-615e-7aad-0bfd-c7156c5426",
            "hour":"11.08.2020, 02:00:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"fdd2c8-67da-b517-7f85-8e2612f28",
            "hour":"11.08.2020, 02:05:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"5befec6-2a2d-13b2-324d-cd7e86a7626",
            "hour":"11.08.2020, 02:10:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"5d6cb20-80ad-3e38-a7e7-aa5feb88d37",
            "hour":"11.08.2020, 02:15:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"b2c78-358-6176-666-862bacec408",
            "hour":"11.08.2020, 02:20:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"ef3f5e-b60b-18a1-ac13-8542d48dc28f",
            "hour":"11.08.2020, 02:25:00",
            "isBooked":false,
            "isConfirmed":false
         }
      ],
      "__v":0
   }
]

const result = sample.reduce((accum, entry) => {
  return [
    ...accum,
    ...entry["Hours"]
  ]
}, [])

console.log("Result", result)

Jose Miguel Arroyave · Accepted Answer · 2020-08-13 17:34:23Z

0

You could try with the map() method

const data = [
  {
    _id: "5f32f3d98fe32813803d32e3",
    StartdateFormatPL: "11.08.2020, 01:30:00",
    EndDateFormatPL: "11.08.2020, 02:00:00",
    Hours: [
      {
        id: "f1dcc-33f8-b32a-3aaa-7bb1b0fcaa6f",
        hour: "11.08.2020, 01:30:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "d8cfbd6-148a-8e0a-41d4-614d7fa6875",
        hour: "11.08.2020, 01:35:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "2e71b4-dcb-fb01-1fa0-8eddc5cbd15",
        hour: "11.08.2020, 01:40:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "cbe26f3-1af2-81a7-3c0b-8ec4be286f15",
        hour: "11.08.2020, 01:45:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "2475ddf-e6ee-6df7-d22d-860e8a31053",
        hour: "11.08.2020, 01:50:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "ad23bc-1506-26da-c272-cfca177565a",
        hour: "11.08.2020, 01:55:00",
        isBooked: false,
        isConfirmed: false
      }
    ],
    __v: 0
  },
  {
    _id: "5f32f60ecee0dd13987cf6a1",
    StartdateFormatPL: "11.08.2020, 02:00:00",
    EndDateFormatPL: "11.08.2020, 02:30:00",
    Hours: [
      {
        id: "e2bbb4-615e-7aad-0bfd-c7156c5426",
        hour: "11.08.2020, 02:00:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "fdd2c8-67da-b517-7f85-8e2612f28",
        hour: "11.08.2020, 02:05:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "5befec6-2a2d-13b2-324d-cd7e86a7626",
        hour: "11.08.2020, 02:10:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "5d6cb20-80ad-3e38-a7e7-aa5feb88d37",
        hour: "11.08.2020, 02:15:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "b2c78-358-6176-666-862bacec408",
        hour: "11.08.2020, 02:20:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "ef3f5e-b60b-18a1-ac13-8542d48dc28f",
        hour: "11.08.2020, 02:25:00",
        isBooked: false,
        isConfirmed: false
      }
    ],
    __v: 0
  }
];

var hours = []
data.map(item =>item.Hours.map(h=>hours.push(h)));
console.log(hours);

edited Aug 13, 2020 at 17:34

answered Aug 11, 2020 at 20:13

Jose Miguel Arroyave

616 bronze badges

2 Comments

Mark Rotteveel Over a year ago

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.

Jose Miguel Arroyave Over a year ago

do you know if there is a way to re-utilize the test dataset provided by the questioner and not include it in the answer, it would make it clearer

Collectives™ on Stack Overflow

ReactJS How to change from array of arrays to one single array

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related