Как парсить локальный JSON файл?

Я использую WebPack и node.js. Моя задача - при нажатии на кнопку обновлять данные на странице, которые берутся из локального JSON файла (в последствии этот файл будет приходить из сервера, но пока упрощенный вариант). Если информация в файле обновится, то при нажатии на кнопку на странице она также должна обновиться.

Вот как я это делаю.

const fs = require('fs');
const readFile = path => fs.readFileSync(path, 'utf8');

const refresh = (e) => {
  const dataFile = readFile('../data.json');
  const data = JSON.parse(dataFile);

  if (euro) {
    euro.innerHTML = data.currency.euro;
  }
  if (usd) {
    usd.innerHTML = data.currency.usd;
  }
  if (rub) {
    rub.innerHTML = data.currency.rub;
  }
}

И получаю ошибку: Uncaught Error: Cannot find module 'fs'

Перепробовал все ответы со Stackoverflow: В webpack.config.js прописывал:

target: 'node'

// или

node: {
  fs: "empty"
}

В package.json прописывал:

"browser": {
    "fs": false
  }

Но ничего из этого не помогло. Что мне делать?


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

Автор решения: Dmitry

Для меня самое простое это поднять Python http.server на локальной машине.

Требования: python v3

Что делать:

  1. Создать папку и положить туда json файл.
  2. Открыть CMD, сменить директорую из пункта 1 и поднять локальный сервер командой
py -m http.server 7999
  1. Сделать запрос
import requests
a = requests.get("http://localhost:7999/1.json")
print(a)

# out
<Response [200]>

Теперь мой json файл доступен по ссылке на локальной машине. В пункте 3, я для теста использую python. Если использовать другие способы сделать GET запрос, например через curl или fetch яваскрипта, все так же будет прекрасно работать.

Сразу написать функию запроса json от сервера, при тестировании использовать локальный адрес, на проде просто поменять url доступа через обычный конфиг.

Пример функции fetch:

const url = "http://localhost:7999/1.json";
let getJsonFile = async () => {
  try {
    const response = await fetch(url, {
      method: "GET",
    });
    const json = await response.json();
    return json;
  } catch (error) {
    console.error(error);
  }
};
→ Ссылка