.map() function is returning an array of arrays instead of array of objects

user_18747632 0
Viewed 1262

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
    }
]
axios reactjs ecmascript-6 arrays javascript
3 Answers

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)

user_78994770

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 comments in the snippet are added.

user_136588160

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

user_154381900
Related