Блог

Мне нужна таблица, которая принимает в качестве опоры объект, подобный приведенному ниже (данные), и создает таблицу. Я нашел несколько библиотек js, которые могут помочь в создании таблиц из json, но я бы предпочел что-то более простое и «стройное».

Я застрял при генерации строк.

 <script>

// export let data

let data = {
    ignore1: 85,
    ignore2: "2020-10-31",
    ignore3: "some data",
    ignore4: "another data",
    ignore5: "../../assets/img/avatar.jpg",
    col1: ["cell1", "cell1", "cell1", "cell1"],
    col2: ["cell2", "cell2", "cell2", "cell2", "cell2", "cell2"],
    col3: ["cell3", "cell3", "cell3"]
}


let columns = []
let values = []
for (const [col, val] of Object.entries(data)) {  
  if (Array.isArray(val)) {
    columns.push(col)
    values.push(val)
  }
}

console.log(columns)
console.log(values)

// From the list of values get the max len of a list 
let rows_len = Math.max(0, ...values.map(item => item.length))

// Normalize lists to have the same length as the biggest one in the nested lists
let rows = values.map(li => {
    if (li.length != rows_len) {
        let fill_arr = Array.from({length: rows_len - li.length}).map(el => "")
        li.push(...fill_arr)
    }
    return li
})

console.log(rows)

let rows_range = Array.from({length: rows_len}).map(el => "")

</script>


<table class="w-full">
<thead class="capitalize border-b-2">
    <tr>
        {#each columns as col}
            <td>{col}</td>
        {/each}
    </tr>
</thead>

<tbody>
    {#each rows[0] as row, i}
        <td>{row}</td>
    {/each}
</tbody>

</table>
  

Вам нужен вложенный цикл в вашем шаблоне. Один для строк, по одному для ячеек в каждой строке:

 <tbody>
  {#each rows as row}
    <tr>
      {#each row as cell}
        <td>{cell}</td>
      {/each}
    </tr>
  {/each}
</tbody>
  

В сочетании с ответом от rixo мне нужно было создать новый список, который брал каждый индекс одновременно из всех 3 списков и создавал другой список. В шаблоне выполняется итерация по html_rows вместо строк.

 let cols_range = Array.from({length: columns.length}).map(el => "")
let rows_range = Array.from({length: rows_len}).map(el => "")

// console.log(`${rows_range.length}rows, ${cols_range.length}cols`)

let html_rows = []
for (let ir = 0; ir < rows_range.length; ir  ) {

    let html_row = []
    for (let ic = 0; ic < cols_range.length; ic  ) {
        console.log(ic, ir, rows[ic][ir])
        html_row.push(rows[ic][ir])
    }

    html_rows.push(html_row)
}
  

Repl: https://svelte.dev/repl/d417680037274d82b3f0fe2cd807d4a2?version=3.29.4