Im stuck on calling fetch inside map. when I run it, it says Maximum call stack size exceeded.

I need function to not return promise, result should be like:

{
   title: someTitle
   key: someKey
   id: someId
   children: [arrayOfSuchElements]
}

Code looks like this, execute is my function. it's using fetch with my arguments.

const treeData = parents.map((el) => {
      console.log("im in loop");

      execute({
        url: "/api/children",
        method: "POST",
        data: { id: el.id },
      })
        .then(({ data }) => {
          const children = data.item1.map((child: any) => {
            execute({
              url: "/api/children",
              method: "POST",
              data: { id: child.id },
            })
              .then((res) => {
                const grandChildren = res.data.item1.map((grandChild: any) => {
                  return {
                    title: child.name,
                    key: grandChild.id,
                    id: grandChild.id,
                    children: [],
                  };
                });
                return {
                  title: child.name,
                  key: child.id,
                  id: child.id,
                  children: grandChildren,
                };
              })
          });

          return {
            title: el.name,
            key: el.id,
            id: el.id,
            children: children,
          };
        })
    });

    return treeData;
  }

CodePudding user response：

use async/await to handle nested promises

const treeData = parents.map(async (el) => {
      console.log("im in loop");

      const data = await execute({
              url: "/api/children",
              method: "POST",
              data: { id: el.id },
            })

       const children = data.item1.map((child: any) => {
           const res=  await execute({
              url: "/api/children",
              method: "POST",
              data: { id: child.id },
            })
            const grandChildren = res.data.item1.map((grandChild: any) => {
                  return {
                    title: child.name,
                    key: grandChild.id,
                    id: grandChild.id,
                    children: [],
                  };
              });
             return {
                  title: child.name,
                  key: child.id,
                  id: child.id,
                  children: grandChildren,
            };
       })

        return {
            title: el.name,
            key: el.id,
            id: el.id,
            children: children,
          };
})

 

CodePudding user response：

I don't see where your code would exceed the call stack, but you can still write it less redundant:

async function loadChildren(items) {
    let result = [];
    for (let { name, id } of items) {
        const response = await execute({
            url: "/api/children",
            method: "POST",
            data: { id },
        });

        result.push({
            title: name,
            key: id,
            id,
            children: await loadChildren(response.data.item1)
        });
    }
    return result;
}

const treeData = await loadChildren(parents);

Unlike your code this runs one request at a time. Depending on how big your data structure is your code may have flooded the server with requests.