Добавить подкатегории в массив категорий

У меня есть объект Category, у каждого Category есть SubCategories. Как правильно загрузить каждый Category свой SubCategories?

const getCategories = async () => {
  const { data: categories } = await axios.get(`api/Categories/GetCategories`); 
  return categories;
};

const getSubCategories = async catId => {
  const { data: subCategories } = await axios.get(`../api/SubCategories/GetSubCategories?catId=${catId}`); 
  return subCategories;
};

javascript

09.04.2019 12:30

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это простой, но неоптимальный метод из-за отсутствия асинхронности.

const categories = getCategories().map(category => {
    return {
        category
        , subCategory: getSubCategories(category.catId)
    }
})

Лучшим способом было бы удалить await из getSubCategories и просто вернуть обещание.

const getSubCategories = async catId => axios.get(`../api/SubCategories/GetSubCategories?catId=${catId}`)

Когда вы возвращаете промисы, они могут выполняться асинхронно.

const categories = getCategories()

Если вы используете асинхронную функцию, вы можете сделать:

const subCategories = await Promise.all(categories.map(category => getSubCategories(category.catId))
const categoriesWithSub = zipWith(categories, subCategories, (category, subCategory) => ({category, subCategory}))

Иначе

Promise.all(categories.map(category => getSubCategories(category.catId))
.then(subCategories => {
    const categoriesWithSub = zipWith(categories, subCategories, (category, subCategory) => ({category, subCategory}))
})

categoriesWithSub — это массив объектов следующей формы.

[{
    category: {} // however your original category object looked like.
    , subCategory: [] // The array of subCategories for this category.
}]

Спасибо за ваш ответ, не могли бы вы объяснить, как работает zipWith? В основном мне нужен массив categories, каждый объект category должен иметь массив subCategories

— 09.04.2019 16:49

В этом случае zipWith возвращает массив объектов, каждый из которых имеет два свойства: категорию и подкатегории. Я обновлю ответ.

— 09.04.2019 17:29

Спасибо, однако подкатегории всегда пусты {}

— 09.04.2019 17:51

Дох, да, я забыл одну вещь. Promise.all возвращает обещание, а не массив. Обновление ответа. Кодировать вслепую непросто

— 09.04.2019 18:05

09.04.2019 13:19