Tengo archivos JSON que contienen los datos de mis publicaciones que están 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 un código que enumera todas mis publicaciones. En [project].svelte , me gustaría mostrar el contenido de la publicación correspondiente. He intentado esto:
<script context="module"> // All posts are contained in src/data/posts // First, read the page.params.project and find the matching // file name and read the data from that file. 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 Unexpected token < in JSON at position 0 SyntaxError: Unexpected token < in JSON at position 0Registré la respuesta en la consola 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? ¿De qué otra manera hago esto? ¿Cuál sería la forma correcta de obtener mi publicación?
Debe convertir su fetch response en JSON .
esto se puede hacer usando .json()
<script context="module"> // All posts are contained in src/data/posts // First, read the page.params.project and find the matching // file name and read the data from that file. export async function load({ page, fetch }) { const slug = page.params.project; let post; const url = `/src/data/posts/${slug}.json` const resp = await fetch(url) /* added this line */ post = await resp.json() /* added this line */ console.log(post) } </script>Dado que fetch solo funciona para servidores externos, utilicé importaciones dinámicas para resolver este problema. El mismo código ahora se escribe como:
<script context="module"> export async function load({ page }) { try { const Post = await import(`../../data/posts/${page.params.project}.json`); console.log(Post); return { // Data passed into svelte component props: { Post:Post.default } }; } catch (e) { return { props: { Post: { headling: "404", content: "Page not found" } } }; } } </script> Y puedo hacer que las Posts estén disponibles así:
<script> export let Post; </script> Esto me da acceso a los pares clave-valor de JSON (como Post.title ).
La ruta al archivo que estaba tratando de obtener: src/routes/posts/index.json.ts
Lo que tenía antes (que me estaba dando un error):
500 Token inesperado < en JSON en la posición 0 SyntaxError: Token inesperado < en JSON en la posición 0
<script context="module" lang="ts"> import type { Load } from "@sveltejs/kit"; export const load: Load = async ({ fetch, url }) => { const res = await fetch("../routes/posts/index.json"); return { props: { posts: await res.json() } }; }; </script>Lo que tenía después (arreglado):
<script context="module" lang="ts"> import type { Load } from "@sveltejs/kit"; export const load: Load = async ({ fetch, url }) => { const res = await fetch("/posts.json"); return { props: { posts: await res.json() } }; }; </script>Terminé resolviendo esto después de leer los documentos actualizados de Sveltekit aquí