Does anybody know why this filterData map function is
returning an array of arrays instead of array of objects ?
I am using a map() function inside another map() so basically I am trying to iterate first map function over the big array and afterwards run it inside the child array.
I just want to return an simple object only wit the data that I select in the second map object.
function apiCall() {
const promises = urls.map((url) => axios.get(url, { headers }));
Promise.all(promises).then((responses) => {
let data = [];
let filterData;
responses.forEach((response) => {
data = data.concat(response.data);
filterData = data.map((nested0) =>
nested0.childNested.map((nested1) => {
return {
id: nested0.id,
name: nested0.serve,
date: nested1.name
};
})
)
});
});
}
and this is the json structure that I want to iterate, map cannot run into the second array from object.
[
{
"Id": "tryuk34io98i",
"src": "planet",
"gwt": {
"gwtId": 918,
"name": "Request"
},
"serve": "Transit1",
"childNested": [
{
"name": "xxl",
"version": "001",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"solved": {
"id": "tik",
"name": "face",
"isOn": "false"
},
"externalRef": [
{
"type": "eight",
"uri": "git"
},
{
"type": "two",
"uri": "git"
}
],
"project": {
"name": "InProgress",
"version": "1",
"active": true
},
"used": 0,
"internal": false
}
],
"affe": 0
},
{
"Id": "987ytrdfghv",
"src": "Space",
"gwt": {
"gwt": 918,
"name": "Request"
},
"serve": "Transit",
"childNested": [
{
"name": "xxs",
"version": "02",
"description": "Nullam sed lorem nec sem lobortis porta. Morbi vitae lorem velit.",
"solved": {
"id": "tok",
"name": "back face",
"isOn": true
},
"externalRef": [
{
"type": "one",
"uri": "http"
},
{
"type": "two",
"uri": "http"
}
],
"project": {
"name": "Fail",
"version": "1.1",
"active": false
},
"used": 0,
"internal": false
}
],
"affe": 0
}
]
Does anybody know why this filterData map function is
returning an array of arrays instead of array of objects ?
I am using a map() function inside another map() so basically I am trying to iterate first map function over the big array and afterwards run it inside the child array.
I just want to return an simple object only wit the data that I select in the second map object.
function apiCall() {
const promises = urls.map((url) => axios.get(url, { headers }));
Promise.all(promises).then((responses) => {
let data = [];
let filterData;
responses.forEach((response) => {
data = data.concat(response.data);
filterData = data.map((nested0) =>
nested0.childNested.map((nested1) => {
return {
id: nested0.id,
name: nested0.serve,
date: nested1.name
};
})
)
});
});
}
and this is the json structure that I want to iterate, map cannot run into the second array from object.
[
{
"Id": "tryuk34io98i",
"src": "planet",
"gwt": {
"gwtId": 918,
"name": "Request"
},
"serve": "Transit1",
"childNested": [
{
"name": "xxl",
"version": "001",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"solved": {
"id": "tik",
"name": "face",
"isOn": "false"
},
"externalRef": [
{
"type": "eight",
"uri": "git"
},
{
"type": "two",
"uri": "git"
}
],
"project": {
"name": "InProgress",
"version": "1",
"active": true
},
"used": 0,
"internal": false
}
],
"affe": 0
},
{
"Id": "987ytrdfghv",
"src": "Space",
"gwt": {
"gwt": 918,
"name": "Request"
},
"serve": "Transit",
"childNested": [
{
"name": "xxs",
"version": "02",
"description": "Nullam sed lorem nec sem lobortis porta. Morbi vitae lorem velit.",
"solved": {
"id": "tok",
"name": "back face",
"isOn": true
},
"externalRef": [
{
"type": "one",
"uri": "http"
},
{
"type": "two",
"uri": "http"
}
],
"project": {
"name": "Fail",
"version": "1.1",
"active": false
},
"used": 0,
"internal": false
}
],
"affe": 0
}
]
-
Because
.map()always returns an array:data.map((nested0) => nested0.childNested.map(...))o.O – Andreas Commented Apr 12, 2022 at 7:05 -
1
Have a look at
.reduce()or.flatMap()or.flat()– Andreas Commented Apr 12, 2022 at 7:07 - @Andreas hmmm but that is weird because if I'm adding that in the jsx is rendering ok, but I need to expose the data . – Jimmy's Cheese Commented Apr 12, 2022 at 7:07
3 Answers
Reset to default 4Using the bination of flatMap, map and destructuring can simplify something like below. (PS. Just interpreted the data in your case, Update your data model if you still an issue)
const responses = [
{
data: {
id: "123",
capacity: 20,
childNested: [{ date: { name: "foo1" } }, { date: { name: "foo2" } }],
},
},
{
data: {
id: "456",
capacity: 40,
childNested: [{ date: { name: "bar" } }],
},
},
];
const output = responses.flatMap(({ data }) =>
data.childNested.map(({ date: { name } }) => ({
id: data.id,
name: data.capacity,
date: name,
}))
);
console.log(output)The solution may be one possible solution to achieve the below described output structure / format:
id: nested0.id, // outer-array "Id" prop
name: nested0.serve, // outer-array "serve" prop
date: nested1.name // inner-array "name" prop
Code Snippet
// method to obtain the array of transformed objects
const transformData = arr => (
arr.flatMap( // iterate the outer-array using "flatMap()"
({ Id, serve, childNested }) => ( // de-structure to directly access props
childNested.map( // iterate over inner-array "childNested"
({ name }) => ({ // de-structure to directly access "name" prop
id: Id, // structure the desired output object
name: serve,
date: name
})
)
)
) // implicit "return" will send the result of "flatMap()"
);
const rawData = [{
"Id": "tryuk34io98i",
"src": "planet",
"gwt": {
"gwtId": 918,
"name": "Request"
},
"serve": "Transit1",
"childNested": [{
"name": "xxl",
"version": "001",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"solved": {
"id": "tik",
"name": "face",
"isOn": "false"
},
"externalRef": [{
"type": "eight",
"uri": "git"
},
{
"type": "two",
"uri": "git"
}
],
"project": {
"name": "InProgress",
"version": "1",
"active": true
},
"used": 0,
"internal": false
}],
"affe": 0
},
{
"Id": "987ytrdfghv",
"src": "Space",
"gwt": {
"gwt": 918,
"name": "Request"
},
"serve": "Transit",
"childNested": [{
"name": "xxs",
"version": "02",
"description": "Nullam sed lorem nec sem lobortis porta. Morbi vitae lorem velit.",
"solved": {
"id": "tok",
"name": "back face",
"isOn": true
},
"externalRef": [{
"type": "one",
"uri": "http"
},
{
"type": "two",
"uri": "http"
}
],
"project": {
"name": "Fail",
"version": "1.1",
"active": false
},
"used": 0,
"internal": false
}],
"affe": 0
}
];
console.log(transformData(rawData));Explanation
Inline ments in the snippet are added.
Because you are using the nested Map Function, First Map returns a second map. Both Maps will return an array.