Rendering nested objects in Svelte

Question

the JSON file looks like below. You can find the entire JSON file at https://api.mocki.io/v1/0f83a2e7

  {
          "rows": [
            {
              "key": [
                "0x1d42",
                {
                  "x": 10.32,
                  "y": 11.13,
                  "z": 1.22
                }
              ],
              "value": {
                "pos": {
                  "x": 10.32,
                  "y": 11.13,
                  "z": 1.22
                },
                "id16": "0x1d42",
                "resultTime": "2021-02-21T23:28:03.558Z"
              }
            },
           .......
        ]}

I want to extract values.pos, values. id16, values.resultime. I tried the below code but it is not giving me any results.

<script>
    import { onMount } from "svelte";

    const apiURL = "https://api.mocki.io/v1/0f83a2e7";
    let data = [];
     onMount(async function() {
        const response = await fetch(apiURL);
        data = await response.json();
    });
</script>

<pre>
<div>
{#each data.rows as row }
                        <div>
                        {#each row.value as value}
                <p> {value.pos} </p>
                        {/each}
            </div>                      
 {/each}
</div>  
</pre>

How can I extract these values so that I can display them in the table?

Answer 1

The first thing to remark is that in Svelte onMount is executed after the markup has been rendered for the first time (during the onMount it can of course be updated) this means that the initial state of your component has to be able to render without a problem, which it doesn't.

You try to iterate over data.rows but this property does not exist initially, you could solve this by initializing data with a property rows: let data = { rows: [] }

Then you try to iterate over value , but value is not an array, so it will not be able to loop over it.

Also value.pos would be an object (x,y,z) so when it eventually renders it will just show [Object object] in the output.

You would extract these values simply by pointing directly at them: <p>{row.value.pos.x}</p>

(It's not entirely clear what you are trying to do here.)

That said, you can make the code a lot simpler by using the await block

<script>
  const apiURL = "https://api.mocki.io/v1/0f83a2e7";
  const load = url => fetch(url).then(res => res.json());
</script>

{#await load(apiURL) then data}
  <pre>
    <div>
      {#each data.rows as row }
        <div>
          <p>{row.value.pos.x}</p>
          <p>{row.value.pos.y}</p>
          <p>{row.value.pos.z}</p>
        </div>                      
      {/each}
    </div>  
  </pre>
{/await}

with this code you wait with rendering until you get your response back and you know that data will always have the correct format