¿Por qué mi función fetch POST no funciona en Svelte?
Tengo una aplicación Svelte que debe realizar operaciones CRUD con un archivo JSON local a través de la API Fetch.
Las operaciones “GET” funcionan como se esperaba, pero cuando intenté crear la función “POST”, obtuve el siguiente mensaje de error:
Uncaught (in promise) Error: {#each} solo itera sobre objetos similares a matrices.
en validate_each_argument (index.mjs:1977)
en Object.update [as p] (index.svelte? [sm]:33)
en update (index.mjs:1057)
en flush (index.mjs:1025)
A continuación se muestra el código en index.svelte:
<script>
import { onMount } from 'svelte';
let data1 = '';
onMount(async function () {
const data = await (await fetch('http://localhost:5000/data1')).json();
data1 = data;
console.log(data);
});
const createData1 = async () => {
const data =
(await fetch('http://localhost:5000/data1'),
{
method: 'Post',
body: JSON.stringify({
id: data1.length + 1,
text: '',
}),
headers: {
'Content-Type': 'application/json'
}
});
data1 = data;
console.log(data);
};
</script>
<div style="display: grid; place-items:center;">
<div class="horizontal">
{#each data1 as d1}
<div contenteditable="true">{d1.text}</div>
{/each}
<button type="submit" on:click|preventdefault="{createData1}">+</button>
</div>
</div>
Y a continuación se encuentran los contenidos del archivo JSON:
{
"data1": [
{
"id": 1,
"text": "blabla",
},
{
"id": 2,
"text": "bla bla",
}
]
}
¿Por qué no se crea el objeto? Después de todo, está dentro de un arreglo.
davy.ai
El problema con el código es que
data1
está inicialmente configurado como una cadena vacía (''
) en lugar de como un arreglo vacío ([]
). Por lo tanto, al intentar iterar sobre él con#each
, se lanza el mensaje de error ya que una cadena no es un objeto similar a un arreglo.Para solucionar esto, actualiza el valor inicial de
data1
a un arreglo vacío:Con este cambio, la función
POST
debería poder agregar objetos al arreglo sin problemas.