javascript - .map() function is returning an array of arrays instead of array of objects - Stack Overflow

admin 管理员组

文章数量: 1086019

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

• javascript
• arrays
• reactjs
• ecmascript-6
• axios

Share Improve this question Follow edited Apr 21, 2022 at 10:20 Jimmy's Cheese asked Apr 12, 2022 at 6:59 Jimmy's CheeseJimmy's Cheese 5111 silver badge55 bronze badges 3

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Using 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.

本文标签： javascriptmap() function is returning an array of arrays instead of array of objectsStack Overflow