How to use two map function with two fetching url

The cleanest solution IMO is to use async/await, with nested Promises it quickly gets fairly unreadable.

async function getCategories() {
  const response = await fetch("https://challenge.fnaghshin.com/api/cat");
  const categories = await response.json();

  const childrenResponses = await Promise.all(
    categories.map((cat) =>
      fetch(`https://challenge.fnaghshin.com/api/catpro/${cat.id}`)
    )
  );

  const childrenData = await Promise.all(
    childrenResponses.map((response) => response.json())
  );

  return categories.map((cat, index) => ({
    key: cat.id,
    label: cat.name,
    date: cat.created_at,
    children: childrenData[index].map((child) => ({
      key: child.id,
      label: child.title
    }))
  }));
}

So first you get your categories, that's pretty simple. Then what you want to do is to use Promise.all() on list of fetch calls with IDs you have from categories (childrenResponses). Then you have to do the same because of .json() in fetch (it would be even cleaner with e.g. axios or similar higher level library instead of fetch), and once you have categories and childrenData you just have to map it the way you want. You can make it a bit more concise by doing e.g. this instead:

const categories = await fetch(
  "https://challenge.fnaghshin.com/api/cat"
).then((res) => res.json());

although in my opinion it's less readable. You should probably also do some error handling, e.g. with try/catch.

Promise.all() expects an array of promises, but you were returning an array of objects. The promise was nested in the children prop of the objects. So what we need to do, is map over these objects and return the nested prop children and feed that to Promise.all()

I added an async funtion to the second then block, so I can use await with Promise.all(). That causes the execution of the code to wait until all promises, that is all children have resolved. After that I can simply return the result.

function getCategories() {
  return fetch('https://challenge.fnaghshin.com/api/cat')
    .then((res) => res.json())
    .then(async (d) => {
      const withChildren = d.map((e) => {
        return {
          key: e.id,
          label: e.name,
          date: e.created_at,
          children: fetch(`https://challenge.fnaghshin.com/api/catpro/${e.id}`).then(res => res.json())
        }
      })
      await Promise.all(withChildren.map(item => item.children))
      return withChildren
    })
}

The 429 (Too Many Requests) seems to be a rate limit, when you fire the requests too often within a certain time. I had it, too. Now it is gone again.

PS: Don't use await in map() in this case, as this makes the execution last longer. Because in each iteration of the map, it will await the response of the fetch(), before going to the next iteration and firing the next fetch(). So instead of firing them all at once (basically), you fire them one after another has resolved. It's faster to fire them all at once, and then await Promise.all().

Here's a promise based version. I split up the main function into parts, so it's easier to read.

Do note that because you are makeing many requests to the API, you are likely to get a 429: too many requests warning.

To solve that you can either use proxies for each request, or you can check the status code and wait for the time the response tells you to wait.

const URL = 'https://challenge.fnaghshin.com/api/cat';
const CHILDREN_URL = `https://challenge.fnaghshin.com/api/catpro/`;

function getCategories() {
  return fetch(URL)
    .then(res => res.json())
    .then(data => Promise.all(data.map(getSubCategories)));
}

function getSubCategories(data) {
  return fetch(CHILDREN_URL + data.id)
    .then(res => res.json())
    .then(info => ({
      key: data.id,
      label: data.name,
      date: data.created_at,
      children: info.map(e => ({
        key: e.id,
        label: e.title,
      })),
    }));
}

getCategories()
  .then(console.log)
  .catch(console.log)