@Uzi82

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

Всем привет!
Я писал сайт для 1 конкурса и столкнулся с проблемой. Мне нужно записать информацию в JSON файл и после расшифровать его. Да, звучит просто, но всё это происходит внутри приложения Vue.js, а точнее в его методах ("methods"). Я прогуглил информацию об этом, но ничего не нашёл. Буду благодарен если вы сможете мне помочь!
  • Вопрос задан
  • 765 просмотров
Пригласить эксперта
Ответы на вопрос 2
Привет! Для записи информации в 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.
Ответ написан
vabka
@vabka
Токсичный шарпист
Что сериализации/десериализации 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
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы