es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo obtener y leer el archivo JSON correcto para mi blog de Sveltekit?

31 Jul, 2023 Programación

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?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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 en public/data/posts/${slug}.json, podemos usar el siguiente código para obtener el archivo y analizarlo como JSON:

    <script context="module">
  // Todos los posts se encuentran en public/data/posts
  // Primero, lee el page.params.project y encuentra el nombre de archivo
  // que coincida y lee los datos de ese archivo.
  export async function load({ page, fetch }) {
    const slug = page.params.project;
    let post;
    const url = `/data/posts/${slug}.json`
    const res = await fetch(url);
    if (res.status === 200) {
      post = await res.json();
      console.log(post);
      return { props: { post } };
    } else {
      console.error("Error al obtener los datos del post");
      return { props: { error: "Error al obtener los datos del post" } };
    }
  }
</script>

    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 es 200, registramos un mensaje de error y devolvemos un objeto de error. Si se recuperó correctamente el archivo JSON, lo analizamos utilizando el método json() 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ón load() importándolos como una propiedad:

    <script>
  export let post;
</script>

<article>
  <h1>{post.title}</h1>
  {post.content}
</article>

    Este código asume que el archivo JSON tiene una propiedad title y content. 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().

Comments are closed.