[英]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.resulttime。 我嘗試了下面的代碼,但它沒有給我任何結果。
<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>
我如何提取這些值以便在表中顯示它們?
首先要注意的是,在 Svelte 中, onMount
是在第一次渲染標記之后執行的(在onMount
期間它當然可以更新)這意味着你的組件的初始 state 必須能夠在沒有問題,它沒有。
您嘗試遍歷data.rows
但此屬性最初不存在,您可以通過使用屬性行初始化數據來解決此問題: let data = { rows: [] }
然后您嘗試遍歷value
,但 value 不是數組,因此它無法循環遍歷它。
另外value.pos
將是一個 object (x,y,z),所以當它最終呈現時,它只會在 output 中顯示[Object object]
。
您只需直接指向它們即可提取這些值: <p>{row.value.pos.x}</p>
(目前還不完全清楚您要在這里做什么。)
也就是說,您可以使用await 塊使代碼更簡單
<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
將始終具有正確的格式
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.