¿Cómo puedo obtener y leer el archivo JSON correcto para mi blog de Sveltekit?
Tengo archivos JSON que contienen los datos de mis publicaciones que se encuentran en src/data/posts/
. Estoy tratando de crear páginas para cada una de esas publicaciones. Esta es mi estructura:
[projects]
|---[project].svelte
|---index.svelte
index.svelte
contiene código que enumera todas mis publicaciones. En [project].svelte
, me gustaría renderizar el contenido de la publicación relevante. He intentado esto:
<script context="module">
// Todas las publicaciones están contenidas en src/data/posts
// Primero, lea page.params.project y encuentre la coincidencia
// nombre de archivo y lea los datos de ese archivo.
export async function load({ page, fetch }) {
const slug = page.params.project;
let post;
const url = `/src/data/posts/${slug}.json`
post = await fetch(url)
console.log(post)
}
</script>
Sin embargo, esto no está obteniendo mi archivo JSON. Recibo la siguiente respuesta:
500
Símbolo inesperado < en JSON en la posición 0
SyntaxError: Símbolo inesperado < en JSON en la posición 0
Registré en la consola la respuesta y fue esta:
[0] Response {
[0] size: 0,
[0] [Symbol(Body internals)]: {
[0] body: <Buffer 3c 21 44 4f 43 54 59 50 45 20 68 74 6d 6c 3e 0a 3c 68 74 6d 6c 20 6c 61 6e 67 3d 22 65 6e 22 3e 0a 20 20 3c 68 65 61 64 3e 0a 20 20 20 20 0a 0a 09 09 ... 59964 more bytes>,
[0] boundary: null,
[0] disturbed: false,
[0] error: null
[0] },
[0] [Symbol(Response internals)]: {
[0] type: 'default',
[0] url: undefined,
[0] status: 404,
[0] statusText: '',
[0] headers: {
[0] 'content-type': 'text/html',
[0] 'permissions-policy': 'interest-cohort=()'
[0] },
[0] counter: undefined,
[0] highWaterMark: undefined
[0] }
[0] }
¿No puedo usar fetch
de esta manera? ¿Cómo más puedo hacer esto? ¿Cuál sería la forma correcta de obtener mi publicación?
davy.ai
Solución
El problema con el código es que el método
fetch
intenta obtener el archivo JSON desde la URL/src/data/posts/${slug}.json
, lo cual no es correcto, ya que no es una URL válida. En su lugar, necesitamos obtener el archivo JSON desde su URL real.Si los archivos se almacenan en la carpeta
public
de la aplicación Svelte, podemos acceder a ellos utilizando su ruta relativa desde allí. Entonces, si el archivo se encuentra enpublic/data/posts/${slug}.json
, podemos usar el siguiente código para obtener el archivo y analizarlo como JSON:En este ejemplo, verificamos si el estado de respuesta HTTP es
200
, lo que significa que el archivo JSON se recuperó correctamente. Si el estado no es200
, registramos un mensaje de error y devolvemos un objeto de error. Si se recuperó correctamente el archivo JSON, lo analizamos utilizando el métodojson()
del objeto de respuesta y lo devolvemos como una propiedad.Ahora, en nuestro componente de página
[project].svelte
, podemos utilizar los datos del post que recuperamos en la funciónload()
importándolos como una propiedad:Este código asume que el archivo JSON tiene una propiedad
title
ycontent
. Puedes ajustarlo según tu propia estructura de datos.Por último, recuerda asegurarte de que tus archivos JSON estén correctamente formateados, especialmente en cuanto a su sintaxis y valores de propiedad. Si hay algún error de sintaxis o tipo de datos incorrecto, podría causar que falle el método
JSON.parse()
.