Как сделать fetch локального JSON?

Question

Пытаюсь так:

import React from "react";
import "./styles.css";

export default function App() {
  const onFetch = async () => {
    const req = await fetch("./data.json");
    return req.json();
  };

  const onMap = () => {
    onFetch()
      .then(data => data.json())
      .then(data => console.log(data));
  };

  return <div className="App">{onMap()}</div>;
}

Но получаю

SyntaxError: Unexpected token < in JSON at position 0

Answer 1

потому что вы два раза вызываете преобразование результата фетча в json на строке 7 и 12

Answer 2

Никак. Для этого нужно запустить бэкэнд с методами работы с файловой системой. Затем вашим фетч делать запрос на бэк, который будет считывать файл отправлять.

Answer 3

Зачем это вообще делать? Можно просто сделать импорт

import data from "./data.json";

Answer 4

Вообще, можно через импорт получить json, а в вашем варианте к fetch запросу нужно указать полный путь и запустить через локальный сервер(await fetch("http://localhost:3000/data.json"))

Answer 5

Нужно переместить файл data.json в папку public

БЛОГ НА HUSL

Как сделать fetch локального JSON?

Ответы (5 шт):