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

Question

Я очень новичок в JQuery, JS и JSON

Я пытаюсь просто получить базовый файл сохранения, созданный с использованием этого кода:

<script>
var myObj, myJSON, text, obj;

// Storing data:
myObj = { name: "John", age: 31, city: "New York" };
myJSON = JSON.stringify(myObj);
$.setJSON("testJSON", myJSON);

// Retrieving data:
text = $.getJSON("testJSON.json");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;

Я почти уверен, что $ .setJSON не существует, но я не могу найти то, что использую для установки переменных. В конце концов я хочу установить циклы и сохранить текст из текстовой области в файл json.

Я знаю, что это не очень хорошая вещь для настройки, и что мне, вероятно, следует настроить это с помощью php и sql. Но это будет использоваться только двумя пользователями, и это не будет одновременно.

Любая помощь будет отличной.

Answer 1

Вот что вы можете сделать с файловыми операциями.

Запрос пользователя на скачивание

Создайте привязку с атрибутом download и data-uri href для JSON.

const data = { name: "John", age: 31, city: "New York" };
document.getElementById('download').addEventListener('click', () => {
  let dl = document.createElement('a')
  dl.download = 'test.json' // target filename
  dl.href = `data:application/json;charset=utf-8,${JSON.stringify(data)}`
  dl.click()
})

<button id="download" type="button">Save</button>

Вы можете столкнуться с проблемами длины URI в зависимости от размера ваших данных, но, учитывая, что вы можете легко кодировать с помощью base64 несколько мегабайтных изображений в data-uri , я бы не стал беспокоиться.

Разрешить пользователю загружать файл

Прослушивание ввода или изменения событий на <input type="file"> и чтение данных файла

document.getElementById('upload').addEventListener('input', e => {
  let file = e.currentTarget.files[0]
  let reader = new FileReader()
  reader.onload = e => {
    try {
      let obj = JSON.parse(e.target.result)
      
      // congrats, you now have an object from the file
      
      document.getElementById('out').textContent = JSON.stringify(obj, null, 2)
    } catch (err) {
      console.error('JSON parsing error', err.message)
    }
  }
  reader.onerror = e => {
    console.error('PANIC!', e)
  }
  reader.readAsText(file)
})

Upload your .json file

В этом ответе пропущена большая проверка ошибок, поэтому я предлагаю вам подробнее ознакомиться с использованием FileReader API.

Answer 2

Вы должны разобрать текст .json в JavaScript. JSON.parse () .Тогда вы можете получить в свойствах.

var json = '{"result":true, "count":42}';
obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true

Answer 3

JS не получит доступ к компьютеру, за исключением некоторых других

Вам следует ( не делать этого, это просто еще один способ сохранить ваш JSON, поскольку JS не может получить доступ через папки в любом случае) сохраните свой json в localStorage.setItem(keytolaterretreive,yourJson)

Позже вы сможете получить его localStorage.getItem(keytolaterretreive), это вернет желаемый json

Пример:

myObj = { name: "John", age: 31, city: "New York" };
myJSON = JSON.stringify(myObj);
localStorage.setItem("myJson",myJSON);
retreivedJson = localStorage.getItem("myJson");
console.log(retreivedJson);<-- your json will be consoled

Для получения дополнительной информации о localStorage

Answer 4

Javascript в браузере не имеет доступа API к базовой файловой системе, поэтому вы не сможете сохранить файл JSON таким образом. Единственное, что вы можете сделать, это объединить пользовательские данные в форму и отправить данные в API на стороне сервера через AJAX.

Эта документация должна помочь вам понять FormData и как его отправить.