在forEach循环中使用Promises和Promise.all

Question

I am amending a locally stored variable (data) using this function, and it works. But because it's not setup with Promises yet, the data is retrieved after the page loads, so it is not shown. I've gone through several iterations of this with attempts at using Promises to get this working properly, but haven't been able to get it right.

I'm assuming there should be a Promise.all for the projects.map area, but then I'm not sure where it gets resolved, and how it's called.

function getProjects() {
  fetch('http://localhost:8888/wp-json/wp/v2/categories')
  .then(r => r.json())
  .then(categories => {
    categories.forEach(category => {
      data.forEach(service => {
        if(service.service_name == category.name) {
          fetch(`http://localhost:8888/wp-json/wp/v2/projects?
categories=${category.id}`)
          .then(r => r.json())
          .then(projects => {
            service.projects = projects.map(project => {
              // if true, add PROJECT to THAT service
                if(project.better_featured_image) {
                  return {
                    project_name: project.title.rendered,
                    project_desc: project.content.rendered,
                    project_img: 
project.better_featured_image.media_details.sizes.medium.source_url
                  }
                } else {
                  return {
                    project_name: project.title.rendered,
                    project_desc: project.content.rendered
                  }
                }
            })
          })
        }
      })
    })
  })
}

var data is set up like this so that each project needs to be attached to a service based on category.

var data = [
  {
    service_name: 'Service 1',
    service_desc: 'Desc',
    service_img: 'Img URL',
    projects: [
      {
        project_name: 'Project 1',
        project_desc: 'Desc',
        project_img: 'Img URL'
      }
  }
]

Answer 1

Use Promise.all()

function getProjects() {
    fetch('http://localhost:8888/wp-json/wp/v2/categories')
        .then(r => r.json())
        .then(categories => {
            var promises = [];
            categories.forEach(category => {
                data.forEach(service => {
                    if (service.service_name == category.name) {
                        promises.push(fetch(`http://localhost:8888/wp-json/wp/v2/projects?categories=${category.id}`)
                            .then(r => r.json()));
                    }
                })
            })
            return Promise.all(promises)
        }).then(data => {
            // Get result of all call 
        })
}