用svelte中的js数据填充html表

Posted 2023-02-19

【中文标题】用svelte中的js数据填充html表

【英文标题】：Fill html table with js data in svelte

【发布时间】：2021-06-01 09:38:33

【问题描述】：

我正在按照此视频https://www.youtube.com/watch?v=XmdOZ5NSqb8 中的教程进行操作，并在我的苗条项目中复制了与他类似的所有内容来尝试，但由于某种原因，我在运行代码时得到了一个空白页。如果我注释掉该部分，我会看到表格的标题。 在网页的控制台中，我得到这个：“未捕获的 TypeError：表为空”。是因为我做错了什么还是因为它与 svelte 不同？我也通读了这篇文章：Create html table from javascript object，但在我看来，它与视频教程的内容相同。

我不确定我是否一直在尝试寻找解决方案太久而我没有看到明显的问题，或者这对我来说是否是新事物，无论如何感谢您的帮助。如果你想试试，这里是代码

干杯

<script>
var myArray = [
        "name":"Bob", "age":"30", "birthday":"11/10/1990",
        "name":"Dan", "age":"40", "birthday":"11/10/1980",
        "name":"Thierry", "age":"50", "birthday":"11/10/1970",
        "name":"Patrick", "age":"60", "birthday":"11/10/1960",
    ]


buildTable(myArray)

function buildTable(data)
    var table = document.getElementById("myTable")

    for (var i = 0; i < data.length; i++)
        var row = `<tr>
                        <td>$data[i].name</td>
                        <td>$data[i].age</td>
                        <td>$data[i].birthday</td>
                  </tr>`
        table.innerHTML += row
    


</script>

<table class="content-table buyside">
    <tr>

        <th>Name</th>
        <th>Age</th>
        <th>Birthday</th>
    </tr>

    <tbody id="myTable">
    </tbody>

</table>

【问题讨论】：

您的代码并不是真正的苗条组件，而是一个普通的 javascript 程序。以下是您的代码的 Svelte 版本。

【参考方案1】：

App.svelte

<script>
    const myArray = [
        "name":"Bob", "age":"30", "birthday":"11/10/1990",
        "name":"Dan", "age":"40", "birthday":"11/10/1980",
        "name":"Thierry", "age":"50", "birthday":"11/10/1970",
        "name":"Patrick", "age":"60", "birthday":"11/10/1960",
     ]
</script>

<table class="content-table buyside">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Birthday</th>
  </tr>
  #each myArray as data
     <tr>
        <td>data.name</td>
        <td>data.age</td>
        <td>data.birthday</td>
      </tr>`
  /each
</table>