CODEWITHSUNDEEP
svelte
James Chen
James Chen

Reputation: 89

Fill html table with js data in svelte

I'm following the tutorial in this video https://www.youtube.com/watch?v=XmdOZ5NSqb8 and I copied everything like him in my svelte project to try, but for some reason as a result I get a blank page when I run the code. If I comment out the part I see the header of the table though. In the console of the web page I get this : "Uncaught TypeError: table is null". Is it because I did something wrong or because it works different with svelte ? I read through this as well : Create HTML table from JavaScript object but it seems to me that it is saying the same thing as the video tutorial.

I'm not sure if I've been trying to find a solution for too long and I don't see the obvious or if it is something new to me, anyway thank you for your help. Here is the code if you want to try it

Cheers

<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>

Upvotes: 0

Views: 1344

Answers (1)

voscausa
voscausa

Reputation: 11706

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>

Upvotes: 3

Related Questions