Как использовать метод .map() для зацикливания двух разных массивов из API?

#javascript #api #methods

#javascript #API #методы

Вопрос:

У меня в API есть 2 разных массива, я бы хотел отобразить на html оба массива.`const displayProducts = (data) => {const dataArray = [данные.Продукты, данные.Цены];

 const htmlString = dataArray[(0, 1)]
  .map((item) => {
    return `<div class="products">
      <h2>${item.ProductType}<span class="span-available">.${item.ProductDescription}</span></h2>
      <div class="products-right-wrapper">
        <div class="products-price-wrapper">
          <div class="products-price-container">
              <sub class="discount-price">$17.99</sub>
              <p>${item.Price}</p>
          </div>
        </div>
      </div>
    </div>`;
  })
  .join('');

productList.innerHTML = htmlString;`
 

Комментарии:

1. Ясно, что это вопрос. У меня есть два разных объекта API, которые я должен сопоставить через оба и использовать dotnotation для доступа к этому элементу.

2. Я пробовал что-то подобное dataArray[0].map((product) => { dataArray[1].map((price) => { , но не смог понять, как я могу вернуть только один.

Ответ №1:

Вопрос не совсем ясен, но я думаю, что вы ищете flatMap .

 const htmlString = dataArray.flatMap(data => data.map((item) => ...)
) 
 

Комментарии:

1. У меня в одном API есть два массива (продукты, цены), когда я сопоставляю продукты, я обращаюсь к объекту, например Products.map((product) => { return <p>${product.Type}</p> }).join(«); Но при том же возврате я не могу получить доступ к объекту Prices. Я подумал, что мне также нужно сопоставить цены. Спасибо за помощь