Я так понимаю проблема-то больше в том, что не понятно

Question

Svelte [svelt] - All about Svelte JavaScript framework.

Я так понимаю проблема-то больше в том, что не понятно

как пробежаться по данным. Но это не проблема Svelte. Нужно сперва понять в каком виде нужны данные (таблица или что?), а потом уже станет понятно как по ним пробегаться. А скорее всего в самом запросе к базе на стороне сервера уже должен быть правильный query, который выдаст уже простые данные для Svelte. Лично я пока не понял, в каком виде предполагается отображение экспедиций и их участников.

#programming #russian #svelte

0

07.12.2022

3 ответов

29 просмотров

Серёга Буров Автор вопроса

Раз if внутри each работает (хотя я сперва думал, что нет), то можно вот так решить вашу проблему: Сперва скачиваем все данные и генерируем объект, где для каждого id участника сопоставлен массив его экспедиций, пробегаясь по данным из participants_plainair: <script> const getPlainairsData = async () => { const participantsPlainairsRelations = await loadData('items/participants_plainair') const participants = await loadData('items/participants/') const plainairs = await loadData('items/plainair/') const participantsPlainairs = {} participantsPlainairsRelations.foreach(relation => { const particId = relation.participants_id if (particId) { if (!participantsPlainairs[particId]) { participantsPlainairs[particId] = [] } participantsPlainairs[particId].push(relation.plainair_id) } }) return { participantsPlainairs, participants, planairs } } </script> Затем, заполнив participantsPlainairs и получив все данные, уже рисуем таблицу: {#await getPlainairsData()} рисуем лоадер {:then plainairsData} <PlainairsTable {plainairsData} /> {:catch error} рисуем ошибку из error {/await} В PlainairsTable-компоненте будет следующее: <script> export let planairsData const { plainairs, participants, participantsPlainairs } = planairsData </script> <div class = 'plainair-table' /> {#each plainairs as plainair} рисуем заголовки экспедиций в первой строке таблицы {/each} В следующих строках рисуем уже список участников и их квадратиков напротив экспедиций. {#each participants as participant} <div class='participant-line'> <div class='participant-name'>{participant.name} и прочие данные по участнику</div> {#each plainairs as plainair} {#if participantsPlainairs[participant.id].includes(plainair.id)} рисуем закрашеный квадратик {:else} рисуем незакрашеный квадратик {/if} {/each} </div> {/each} </div> Как-то так. Код не проверял.

0

07.12.2022

Andrey Golovin

Серёга Буров
Раз if внутри each работает (хотя я сперва думал, ...

Спасибо вам большое, разделил на компоненты:, сначала не заработало, но дебажить стало проще по необьяснимым причинам. кароче я забыл проверку

0

08.12.2022

Andrey Golovin · Accepted Answer

Andrey Golovin

Серёга Буров
Раз if внутри each работает (хотя я сперва думал, ...

Большое спасибо. Кароче, да, мне достаточно было разделить это на два компонента. Чтобы ичи не рендерились до загрузки данных: пихаем их в отдельный компонент, а потом его показываем в авэйт блоке! сработало с первого раза.

0

08.12.2022

169 похожих чатов

Я так понимаю проблема-то больше в том, что не понятно

3 ответов

Похожие вопросы