Всем привет!
У меня есть json файл в котором имеется массив объектов(список людей с именем и фамилией):
[{ "firstName" : "Антон", "lastName" : "Фролов" }, { "firstName" : "Андрей", "lastName" : "Данилов" }]
Есть простая HTML структура с двумя кнопками и 2 полями ввода, 1я кнопка выводит данные с json файла, а 2я добавляет в массив нового человека с введенными данными(Имя и Фамилия), над качеством кода особо не заморачивался, просто набросал структуру:
<input id="getJson" type="button" value="Список людей" />
<p id="output"></p><br /><br />
Добавить человека: <br /><br />
Имя: <input id="nameField" type="text"><br /><br />
Фамилия: <input id="surnameField" type="text"><br /><br />
<input id="saveBtn" type="button" value="Save" />
Ну и сам js код, который асинхронно подгружает данные json'a и задает действия под кнопки:
var getJson = document.getElementById("getJson");
var saveBtn = document.getElementById("saveBtn");
var xhr = new XMLHttpRequest();
var data;
function reload() {
xhr.open("GET", "test.json");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
data = JSON.parse(xhr.responseText);
document.getElementById("output").innerHTML = '';
for(var i = 0; i < data.length; i++){
document.getElementById("output").innerHTML += "Имя - " + data[i].firstName + ", Фамилия - " + data[i].lastName + "<br />";
}
}
}
xhr.send();
}
reload();
getJson.onclick = reload;
saveBtn.onclick = function () {
var newName = document.getElementById("nameField").value;
var newSurname = document.getElementById("surnameField").value;
var newPerson = { "firstName" : newName, "lastName" : newSurname };
data.push(newPerson);
}
Ну а теперь сам вопрос, как мне реализовать сохранение данных в этом же json файле, тоесть когда я нажимаю на кнопку SAVE, данные не просто сохранялись в массив людей, но и добавлялись в json файл, при этом если я еще раз нажму на кнопку что бы вывести список людей после добавления, то выводилось актуальное кол-во, так как все по идее работает без перезагрузки страницы.
Заранее благодарен за идеи и возможно за готовые решения!
