Как передать json файл из серверного файла app.js ( node.js ) в клиентский function.js, для обработки и вывода в html?

Question

[fobya]

var data;

db.Stores.find({}, { name: 1, _id: 0 }, (err, docs) => {
    data = JSON.stringify(docs.map(doc => doc.name));
    console.log(data);
    console.log(typeof(data));
    fs.writeFile('data.json', data, 'utf8', function (err) {
        if (err) throw err;
        console.log('JSON-файл был успешно создан и записан.');
    });
});

Я создал json файл в app.js из полученных данных из базы данных.
Для прочтения json файла в клиентском function.js использовал fetch ( путь верный )

fetch('data.json')
  .then(response => {
    if (response.ok) {
        console.log('Работает');
      return response.text();
    } else {
      throw new Error('Произошла ошибка при получении файла');
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

Но в консоли браузера ошибки:
functions.js:8 GET 37.143.13.38/data2.json 404 (Not Found)
(anonymous) @ functions.js:8
functions.js:21 Error: Произошла ошибка при получении файла
at functions.js:14:13
functions.js и data.json находятся в одной папке
Я новичок в node.js, пожалуйста, напишите подробнее!

Answer 1

[Фархад Асадов]

Смотри, у тебя есть Серверная часть и Клиентская , общаются они через некий язык запросов. Клиент просит , а он Сервер возвращает. У тебя на сервере должен быть обработчик этого запроса,а именно, ты создаёшь endpoint (допустим GET запрос /getJsonData).

Вариант 1 : Пишешь в этом endpoint'е логику , которая читает этот файл и возвращает клиенту. То есть, после того,как вы написали логику для /getJsonData, вы потом по этому URL обращается уже с клиента. И сервер вернёт вам ваш JSON

Вариант 2 : Вообще, непонятно, зачем сохранять в файл, а потом его же передавать? Ведь можно сразу получить его с базы и отправить клиенту

Answer 2

[Сергей П]

fetch('data.json') выполняется на компьютере пользователя внутри его браузера, а файл вы сохранили в файловой системе сервера, в каталоге где запущено ваше приложение.
fetch загружает контент по http с удалённого сервера, по умолчанию берется тот же хост, с которого получена страница со скриптом. Но этот сервер не отдаёт по http по пути имени этого файла этот файл. Для этого нужно либо создать соответствующий хендлер на сервере и настроить роутинг, либо положить файл в файловой системе так, чтобы его раздавал веб-сервер, который вы используете в качестве прокси, например nginx. Тогда вы сможете скачать клиентом этот файл.

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

Это тривиальная задача, которую изучают все в самом начале изучения веб-разработки. Если вы хотите дойти до всего самостоятельно и изобрести пару квадратоколёсных велосипедов по пути - ваше право. Но трудно найти индивидуального репетитора, который будет вас учить таким азам, которые можно прочесть в книжке.