Łukasz Jaworski
Reputation: 35
ReactJS How to change from array of arrays to one single array
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
}
]
Upvotes: 1
Views: 697
Answers (4)
Jose Miguel Arroyave
Reputation: 61
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);Upvotes: 0
Jimmay
Reputation: 722
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)Upvotes: 0
jockerThe00
Reputation: 146
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.
Upvotes: 0
Drew Reese
Reputation: 203562
data.flatMap(({ Hours }) => Hours);
Map the data to arrays of Hours then flatten.
The
flatMap()method first maps each element using a mapping function, then flattens the result into a new array. It is identical to amap()followed by aflat()of depth 1, butflatMap()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)Upvotes: 1
Related Questions
- React Javascript Multiple Arrays to an Object of Arrays
- How to make Array to Variable
- How to create a new array from multiple arrays
- how to push multiple objects in react js to array?
- how can i extract arrays from one array & convert them in object and put them in a new array?
- How do I convert array to an array object and combine two arrays to a one array?
- Convert the array of object into array in react
- ReactJS : Creating an Array of Arrays in ReactJS
- Converting array into object of array in react
- Manipulation of Array in React