在 Svelte 中渲染嵌套对象
Rendering nested objects in Svelte
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 中显示它们?
首先要注意的是,在 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
将始终具有正确的格式
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 中显示它们?
首先要注意的是,在 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
将始终具有正确的格式