在 Svelte 中渲染嵌套对象

Question

JSON 文件如下所示。您可以在 https://api.mocki.io/v1/0f83a2e7

找到整个 JSON 文件

  {
          "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"
              }
            },
           .......
        ]}

我想提取 values.pos 值。 id16，values.resultime。我尝试了下面的代码，但它没有给我任何结果。

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

如何提取这些值以便在 table 中显示它们？

Answer 1

首先要注意的是，在 Svelte onMount 中执行在标记首次呈现之后（在 onMount 它当然可以更新）这意味着您的组件的初始状态必须能够毫无问题地呈现，而事实并非如此。

您尝试遍历 data.rows 但此属性最初并不存在，您可以通过使用属性行初始化数据来解决此问题：let data = { rows: [] }

然后您尝试遍历 value，但值不是数组，因此无法对其进行循环。

另外 value.pos 将是一个对象 (x,y,z) 所以当它最终呈现时它只会在输出中显示 [Object object]。

您只需直接指向它们即可提取这些值：<p>{row.value.pos.x}</p>

（不完全清楚你在这里想做什么。）

就是说，您可以使用 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}

使用此代码，您可以等待渲染，直到您收到响应并且您知道 data 将始终具有正确的格式

在 Svelte 中渲染嵌套对象

Rendering nested objects in Svelte

javascript

svelte-3