svelte - Svelte - 帮助从 API 解析数据 - 对象 json
问题描述
我在显示从 API 获取的数据时遇到问题。
示例 json 数据:
{
"records": [
{
"event": {
"type": "navigate"
},
"setup": {
"attributes": {
"title": "New Tab"
},
"description": "",
"name": "",
"type": null,
"url": "chrome://newtab/"
},
"time": 1612271431271
},
{
"event": {
"type": "navigate"
},
"setup": {
"url": "https://3.basecamp.com/signup/account/new?plan=one_v1"
},
"time": 1612271438035
},
{
"event": {
"type": "focus"
},
"setup": {
"altPath": "article/form/section[1]/div[1]/input[@id='signup_full_name'][@name='signup[full_name]'][@type='text']",
"altSelector": "article #signup_full_name",
"attributes": {
"autofocus": "autofocus",
"class": "input session-fields__signup floating-placeholder__input",
"id": "signup_full_name",
"name": "signup[full_name]",
"placeholder": "Your name",
"rcrdr-extra-style": {
"display": "block",
"visibility": "visible"
},
"required": "required",
"type": "text"
},
"computedRole": "textbox",
"frame": "0",
"frame_id": "0",
"html": "<input class=\"input session-fields__signup floating-placeholder__input\" placeholder=\"Your name\" required=\"required\" autofocus=\"autofocus\" type=\"text\" name=\"signup[full_name]\" id=\"signup_full_name\">",
"nodeName": "input",
"nodeType": 1,
"rootpath": "/html/body/main/div/section/article/form/section[1]/div[1]/input",
"selector": "#signup_full_name",
"xpath": "id(\"signup_full_name\")"
},
"time": 1612271489789
}
]
}
我的目标是在表格中显示每个键,例如,输出应如下所示:
到目前为止我尝试过的是:
<script>
import { onMount } from "svelte";
// Please, consider the data sample provided above.
const apiURL =
"http://localhost/electron/my-test/data.json";
let recordsObject = [];
let records;
onMount(async () => {
const response = await fetch(apiURL);
if (response.status === 200) {
console.log("Success");
recordsObject = await response.json();
records = JSON.stringify(recordsObject);
// console.log(recordsObject);
console.log(records);
} else {
throw new Error(response.status);
}
});
</script>
<section>
<ul>
{#each [records] as record}
<li>
{record}
</li>
{/each}
</ul>
</section>
我得到的输出是这样的:
{"records":[{"event":{"type":"navigate"},"setup":{"attributes":{"title":"New Tab"},"description":"","name":"","type":null,"url":"chrome://newtab/"},"time":1612271431271},{"event":{"type":"navigate"},"setup":{"url":"https://3.basecamp.com/signup/account/new?plan=one_v1"},"time":1612271438035},{"event":{"type":"focus"},"setup":{"altPath":"article/form/section[1]/div[1]/input[@id='signup_full_name'][@name='signup[full_name]'][@type='text']","altSelector":"article #signup_full_name","attributes":{"autofocus":"autofocus","class":"input session-fields__signup floating-placeholder__input","id":"signup_full_name","name":"signup[full_name]","placeholder":"Your name","rcrdr-extra-style":{"display":"block","visibility":"visible"},"required":"required","type":"text"},"computedRole":"textbox","frame":"0","frame_id":"0","html":"<input class=\"input session-fields__signup floating-placeholder__input\" placeholder=\"Your name\" required=\"required\" autofocus=\"autofocus\" type=\"text\" name=\"signup[full_name]\" id=\"signup_full_name\">","nodeName":"input","nodeType":1,"rootpath":"/html/body/main/div/section/article/form/section[1]/div[1]/input","selector":"#signup_full_name","xpath":"id(\"signup_full_name\")"},"time":1612271489789},{"event":{"type":"focus"},"setup":{"altPath":"article/form/section[1]/div[1]/input[@id='signup_full_name'][@name='signup[full_name]'][@type='text']","altSelector":"article #signup_full_name","attributes":{"autofocus":"autofocus","class":"input session-fields__signup floating-placeholder__input","data-sc-fieldtype":"FULL_NAME","data-sc-fieldtype-id":"160","id":"signup_full_name","name":"signup[full_name]","placeholder":"Your name","rcrdr-extra-style":{"display":"block","visibility":"visible"},"required":"required","type":"text"},"computedRole":"textbox","frame":"0","frame_id":"0","html":"<input class=\"input session-fields__signup floating-placeholder__input\" placeholder=\"Your name\" required=\"required\" autofocus=\"autofocus\" type=\"text\" name=\"signup[full_name]\" id=\"signup_full_name\" data-sc-fieldtype=\"FULL_NAME\" data-sc-fieldtype-id=\"160\">","nodeName":"input","nodeType":1,"rootpath":"/html/body/main/div/section/article/form/section[1]/div[1]/input","selector":"#signup_full_name","xpath":"id(\"signup_full_name\")"},"time":1612271498250}
请问,有没有人可以帮助我使用 svelte 在表格中显示输出?
谢谢你。
编辑:
我改变了我的代码:
<script>
const apiURL =
...src/Data/data.json";
let recordsObject = [];
let records = [];
let results = {};
let disabled = false;
let promise = Promise.resolve([]);
async function getDataFromApi() {
const response = await fetch(apiURL);
recordsObject = await response.json();
records = recordsObject.records;
// console.log(records);
console.log(records.length);
for (var i = 0; i < records.length; i++) {
results[i] = records[i];
}
console.log(results);
if (response.status === 200) {
console.log("Success");
// console.log(recordsObject);
} else {
throw new Error(response.status);
}
}
function handleClick() {
promise = getDataFromApi();
disabled = true;
}
</script>
<button on:click={handleClick} {disabled}> Load Data </button>
{#await promise}
<p>retrieving data...</p>
{:then results}
<li>
{#each [{ results }] as record}
{record}
{/each}
</li>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
现在输出很简单:
- [对象对象]
请问,你知道我为什么得到这个输出吗?
谢谢
解决方案
我将指出一些应该有所帮助的事情,我强烈建议阅读以下内容:
记录是一个字符串,但应该是一个数组
您调用的变量records
是单个字符串;我们可以在线上看到这一点records = JSON.stringify(recordsObject);
。
因为它是一个字符串而不是一个数组,所以您正在each
使用{#each [records] as record}
. 从语法上讲,这是可行的,但这几乎肯定不是您想要的。您真正想要的是records
变量等于json 响应中的数组。
records = recordsObject.records
如果您想知道为什么会这样,那么我强烈建议您进一步阅读有关使用 javascript 对象的内容。
表格不是自动的
每条记录都是一个 javascript 对象,本质上是一组键值对。Svelte 不会自动将对象转换为表格,因为它不知道也不知道如何操作。这取决于您是否使用 HTML 进行格式化。
因此,当您的代码中有此内容时:
<li>
{record}
</li>
那只会吐出原始对象。您必须自己将其格式化为表格。我之前提供的 Svelte 每个块上的链接提供了一个小示例,说明如何开始执行该任务。
对于您的具体情况,以下是如何将记录分解为其不同部分的开始。
<li>
Type: {record.event.type}; Time: {record.time}
</li>
推荐阅读
- c# - 编辑列表中的一行
并刷新 ListView - c - 带有“O_EXEC”的“open()”与“execve()”有何不同和相关?
- python - 数据框中的 .map(str) 和 .astype(str) 有什么区别
- git - Visual Studio - 没有合并 GUI,只有差异
- aria2 - aria2c 将下载结果表保存到文件
- android - 我的 android studio 出现错误
- javascript - 将转换后的 HTML 元素移动到绝对位置
- angular - Angular 6 创建一个 observable 来检查变量的变化
- javascript - webpack 4 + babel 6 + ES 模块和脚本消耗
- python - Piecewise PYTHON的傅里叶级数