Сохранить, показать и удалить файл JSON

Question

Я новичок в javascript и у меня проблема с javascript и ajax.Я хотел бы иметь такой эффект, что я добавляю новые элементы с новыми индексами.Я сохраняю это в файл json, затем отображаю этот файл на сайте.И теперь я могу удалить любой элемент с любым индексом с помощью кнопки «удалить» на сайте.

Это мой код:

function remove() {
    var obj = {
        'index': document.getElementById("index").value
    };
    for(var i = arr.length - 1; i >= 0; i--) {
        if(arr[i]['index']===obj['index']) {
           arr.splice(i, 1);
        }
    }
    console.log(arr);
}
function addTo() {
    var obj = {
        'index': document.getElementById("index").value,
        'name': document.getElementById("name").value,
        'surname': document.getElementById("surname").value,
        'years': document.getElementById("years").value
    };
   
    if (!arr.some(e=>e['index']==obj['index'])) 
        arr.push(obj);
    else
        arr[arr.map((e, i) => [i, e]).filter(e => e[1]['index']==obj['index'])[0][0]] = obj
    console.log(arr);
}

var arr=[];
$(document).ready(function() {
    $.ajax({
        url : "data.json",
        type: "",
        data : jsonData,
    });
    e.preventDefault(); 
});

<select id="index" name="index">
    <option hidden="" >Index</option> 
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<input placeholder="Name" type="text" id="name"/>
<input placeholder="Surname" type="text" id="surname"/>
<input placeholder="Years" type="text" id="years"/>
<input type="button" onclick="remove()" value="Delete"/>
<input type="button" onclick="addTo()" value="Add"/>

Answer 1

Невозможно записать в локальный файл, используя клиентский (браузерный) JavaScript из соображений безопасности.если url был направлен на бэкэнд-сервис и type POST или UPDATE , то это будет разрешено.

Вы можете попробовать localStorage , так как ajax здесь не работает.

Посмотрите, как вы будете использовать localStorage

function remove() {

  var arr = [];
  var obj = {
    'index': document.getElementById("index").value
  };
  for (var i = arr.length - 1; i >= 0; i--) {
    if (arr[i]['index'] === obj['index']) {
      arr.splice(i, 1);
    }
  }
  localStorage.removeItem("user", JSON.stringify(arr));
  //console.log(arr);
}

function appendLocalStorage(keys, data) {
  var old = localStorage.getItem(name);
  if (old === null) old = "";
  localStorage.setItem(name, old + data);
}

function addTo() {
  var arr = [];
  var obj = {
    'index': document.getElementById("index").value,
    'name': document.getElementById("name").value,
    'surname': document.getElementById("surname").value,
    'years': document.getElementById("years").value
  };

  if (!arr.some(e => e['index'] == obj['index'])) {

    arr.push(obj);
  } else {
    arr[arr.map((e, i) => [i, e]).filter(e => e[1]['index'] == obj['index'])[0][0]] = obj;
  }
  appendLocalStorage("user", JSON.stringify(arr));
  alert(localStorage.getItem("user"));
}

<select id="index" name="index">
  <option hidden="">Index</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<input placeholder="Name" type="text" id="name" />
<input placeholder="Surname" type="text" id="surname" />
<input placeholder="Years" type="text" id="years" />
<input type="button" onclick="remove()" value="Delete" />
<input type="button" onclick="addTo()" value="Add" />