如何在 map function 中获取 API？

Question

I want to fetch an API inside a map function. How can I do it? Inside an ul html element, I need to fetch another API. That API looks like "$(url)/cities/${state}". It will give me a list of city that I want to render with another map function. I tried to do a way but it returned "[object Promise]"

fetch(`${url}/states/${Country}`)
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          const States = data.states.map(({ state }) => {
              return `<div class="col-6 col-sm-3 p-2">
              <p class="state" id="stateID">${state}</p>
              <ul class="city-list">

                /*I want a city list here by fetching another API accroding to this ${state}*/

                ${fetch(`${url}/cities/${state}`)
                .then((response) => {
                  return response.json();
                })
                .then((data) => {
                  data.cities.map((citys) => {
                      return `<li class="city"><a href="#">${citys}</a></li>`;
                    })
                    .join("");
                     document.querySelector(".city-list").insertAdjacentHTML("beforeend", City);
                })}
                /*But this fetch function return [object Promise]*/

              </ul>
            </div>`;
            })
            .join("");
          document.querySelector(".line")
            .insertAdjacentHTML("afterend", States);

Answer 1

Here is a clean way to do what you want to do. It includes fetch api inside map

import { pipe, fork, map } from 'https://deno.land/x/rubico/rubico.js'

const identity = x => x

const join = delim => x => x.join(delim)

const template = ({ state, cities }) => `
<div class="col-6 col-sm-3 p-2">
  <p class="state" id="stateID">${state}</p>
  <ul class="city-list">${cities}</ul>
</div>`

const fetchJSON = url => fetch(url).then(res => res.json())

const citiesHTML = pipe([
  ({ state }) => `${url}/cities/${state}`,
  fetchJSON,
  ({ cities }) => cities,
  map(city => `<li class="city"><a href="#">${city}</a></li>`),
  cities => {
    for (const city of cities) {
       document.querySelector(".city-list").insertAdjacentHTML("beforeend", city)
    }
    return cities
  }
  join(''),
])

pipe([
  fetchJSON,
  ({ states }) => states,
  map(pipe([
    fork({
      state: identity,
      cities: map(citiesHTML),
    }),
    template,
  ])),
  join(''),
  statesHTML => {
    document.querySelector(".line").insertAdjacentHTML("afterend", statesHTML)
  },
])(`${url}/states/${Country}`)

I wrote the library in the example to solve complex async tasks like yours.