Подтягиваем данные из Кодзиро в таблицу Тильды

https://api.kodzero.pro/v1/10000/100014

Изображение;Артикул;Название;Остаток;Цена;

<script>
(function() {
    const tableSyncConfig = {
        // ID блок Тильды с таблицей
        tableRecId: '#rec2144224941',
        // URL для получения данных из Kodzero
            collectionUrl: `https://api.kodzero.pro/v1/10000/100014`,
        // Настройки колонок
        // template - это шаблон, который определяет, как будет отображаться значение в ячейке.
        // В шаблоне {value} будет заменено на фактическое значение из данных Kodzero для этой колонки.
        // Отсутствие шаблона означает, что значение будет вставлено как есть, без дополнительного форматирования.
        columns: {
            'image': {
                title: 'Изображение',
                template: '<img src="{value}" alt="image" style="max-width: 180px; max-height: 180px;" />'
            },
            'sku': {
                title: 'Артикул',
                template: '<strong>{value}</strong>'
            },
            'title': {
                title: 'Название',
            },
            'stock': {
                title: 'Остаток',
                template: '{value} шт.'
            },
            'price': {
                title: 'Цена',
                template: '{value} ₽'
            }
        }
    }

    // =======================================================
    // Далее находятся технические функции
    // Их можно не трогать, если не нужно менять логику работы

    const fetchKodzeroData = async () => {
        try {
            const result = await fetch(tableSyncConfig.collectionUrl)
            const json = await result.json()
            return json.ok && json.result ? json.result.found : []
        } catch (error) {
            console.error('Ошибка при получении данных из Kodzero:', error)
            return []
        }
    }

    const getTable = () => {
        const divWrapper = document.querySelector('#' + tableSyncConfig.tableRecId.replace('#', ''))
        const table = divWrapper.querySelector('table')
        const widthSettings = table.getAttribute('data-table-width').split(';')
        const columns = getColumnIdsOrdered(table)

        if (!table || !columns.length) {
            console.error('Не удалось найти таблицу или определить колонки. Проверьте правильность настроек и структуру таблицы на Тильде')
            return null
        }

        const output = {
            divWrapper,
            table,
            widthSettings,
            columns
        }
        
        return output
    }

    const getColumnIdsOrdered = (tableNode) => {
        const headers = tableNode.querySelectorAll('.t431__thead th')
        const columns = [...headers].map(el => el.innerText)
        const idValues = tableSyncConfig.columns
        
        columns.forEach((header, i) => {
            const id = Object.keys(idValues).find(key => idValues[key]?.title === header)
            columns[i] = id || ''
        })

        return columns
    }

    const getTableBody = () => {
        const tableBody = document.querySelector('#' + tableSyncConfig.tableRecId.replace('#', '')).querySelector('.t431__tbody')
        return tableBody
    }

    const insertRows = (records, tableData) => {
        clearTable()
        const tableBody = getTableBody()

        records.forEach((record, i) => {
            const tr = document.createElement('tr')
            tr.classList.add(i % 2 === 0 ? 't431__oddrow' : 't431__evenrow')
            
            tableData.columns.forEach(col => {
                const template = tableSyncConfig.columns[col]?.template || '{value}'
                const value = template.replace('{value}', record[col] || '')
                const td = document.createElement('td')

                td.classList.add('t431__td')
                td.classList.add('t-text')
                td.innerHTML = value

                tr.appendChild(td)
            })

            tableBody.appendChild(tr)
        })
    }   

    const clearTable = () => {
        const tableId = '#' + tableSyncConfig.tableRecId.replace('#', '')
        const tableBody = document.querySelector(tableId)?.querySelector('.t431__tbody')
        if (!tableBody) return
        tableBody.innerHTML = ''
    }

    const syncTableWithKodzero = async () => {
        try {
            clearTable()

            const records = await fetchKodzeroData()
            if (!records.length) return console.warn('Нет данных для отображения в таблице')
            
            const tableData = getTable()
            if (!tableData) return console.warn('Обработка данных таблицы невозможна из-за ошибок в структуре или настройках')

            insertRows(records, tableData)
        } catch (error) {
            console.error('Неожиданная ошибка при синхронизации таблицы:', error)
        }
    }

    document.addEventListener('DOMContentLoaded', syncTableWithKodzero)
})()