.map() function 返回一个 arrays 数组而不是对象数组

Question

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
    }
]

Answer 1

Using the combination 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)

Answer 2

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": "pl.net", "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 comments in the snippet are added.

Answer 3

Because you are using the nested Map Function, First Map returns a second map. Both Maps will return an array.