Как записать информацию в json внутри приложения Vue.js?

Question

[Uzi82]

Всем привет!
Я писал сайт для 1 конкурса и столкнулся с проблемой. Мне нужно записать информацию в JSON файл и после расшифровать его. Да, звучит просто, но всё это происходит внутри приложения Vue.js, а точнее в его методах ("methods"). Я прогуглил информацию об этом, но ничего не нашёл. Буду благодарен если вы сможете мне помочь!

Comments

[Василий Банников]

Что значит "расшифровать" в вашем случае?
Что понимается под записью?

Как бы вы это делали без vue? Как вам vue помешал?

[HardBot]

Шифрованный json? :D
Покажи свой код, что в json, как пробовал.

[Uzi82]

Василий Банников, Под расшифровать я имею ввиду из переменной типа данных string перевести строку, записанную в файле, в массив данных

[Uzi82]

Василий Банников, без vue это делается через функции node js, а именно

fs=require("fs")
fs.writeFileSync("txt.txt", "my text",  "ascii")

Внутри приложения Vue данный метод выдаёт ошибку, говорящую о том, что метод require не существует, я пробовал её пофиксить, но ничего не сработало.

[Uzi82]

HardBot, под шифровкой я имею ввиду перевод из массива данных в строку, которую и надо записать в файл расширения JSON, пробовал через функцию Node.js, которую описал в комментарии выше.

[Василий Банников]

Uzi82, vue - это же фреймворк для фронта. Даже если бы require работал - у тебя бы повалилось всё на fs.writeFile.
На фронте нельзя записывать файлы.

[Василий Банников]

Uzi82, а как ты vue внутри Nodejs используешь?

Answer 1

[Злой минон]

Привет! Для записи информации в JSON файл внутри приложения Vue.js, можно использовать стандартный объект JavaScript JSON и метод stringify. А для чтения JSON файла, можно использовать метод fetch.

Пример записи объекта в JSON файл:

methods: {
  saveData() {
    const data = {name: 'John', age: 30};
    const jsonData = JSON.stringify(data);
    
    fetch('/path/to/save/file.json', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: jsonData
    })
    .then(response => {
      console.log('Data saved:', response);
    })
    .catch(error => {
      console.error('Error:', error);
    });
  }
}

Пример чтения JSON файла:

methods: {
  loadData() {
    fetch('/path/to/load/file.json')
    .then(response => response.json())
    .then(data => {
      console.log('Data loaded:', data);
    })
    .catch(error => {
      console.error('Error:', error);
    });
  }
}

Обратите внимание, что в примерах используются асинхронные операции fetch. Если вы используете браузеры, которые не поддерживают fetch, можете использовать библиотеку для AJAX, например, axios.

Comments

[Uzi82]

Решение достаточно оригинальное, но у меня возникла проблема с указыванием пути к файлу JSON. Я создал его, указал в
fetch('Свой путь', {
, но мне выдаёт такую ошибку:

[Василий Банников]

Uzi82, а сервер то у тебя обрабатывает такие запросы?)
Чтобы использовать ответы ChatGPT нужно понимать, что он вообще предлагает.

Answer 2

[Василий Банников]

Что сериализации/десериализации json используются функции JSON.stringify и JSON.parse.

Если тебе нужно сохранить файл на том же компьютере, на котором открыт сайт, то ты можешь использовать два варианта:
1. FileSystem API (достаточно сложно на самом деле. Я не буду давать пример его использования)
2. Использовать хак с невидимой ссылкой на скачивание.

const obj = { "hello": "world"};
const fileText = JSON.stringify(obj);
const fileName = "example.json";

const pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileText));
pom.setAttribute('download', fileName);
if (document.createEvent) {
  var event = document.createEvent('MouseEvents');
  event.initEvent('click', true, true);
  pom.dispatchEvent(event);
}
else {
  pom.click();
}

Для чтения файла можно использовать FileReader:
https://itchief.ru/javascript/filereader