Save, show and delete json file

Question

I'm newbie in javascript and i have a problem with javascript and ajax. I would like to have such an effect that I add new elements with new indexes. I save this to the json file, then I display this file in site. And now i can delete any element with any index by button "delete" on site.

This is my code:

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"/>

I am newbie in javascript, could you help me to adapt this question to my code? Becouse i don't know how I can use it. I don't need download it, i need save the objects from input to json file, next show it in site and then can delete one or all objects. — Despo, Jan 24 '19 at 08:11

O.O · Accepted Answer · 2019-01-24T09:39:48.320

It is not possible to write to a local file using client side (browser) JavaScript for security reasons. if the url was directed to a backend service and of type POST or UPDATE then this would be allowed.

You can try localStorage as ajax wont work here.

See how you'd use 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" />

Ok, thank you. I don't know it. So, could you help me how I can write this file in url type POST? — Despo, Jan 24 '19 at 08:34
You'd need a backend service to handle the file writing. e.g. a small PHP application that just takes the `POST` parameters and saves it to a file. Something like this would probably work: https://pastebin.com/1Aaj1Nkw — Linschlager, Jan 24 '19 at 08:42
@Despo See updated answer, using your provided code with `localStorage`. Snippet wont work, copy to your script. — O.O, Jan 24 '19 at 09:31
@Despo There are plenty of options available for backend services, I mostly use `NodeJS` & `ExpressJS` as a server side platform along with a database. A bit more involved than `localStorage` https://stackoverflow.com/q/6158933/7626277 — O.O, Jan 24 '19 at 09:56
Thanks, maybe you have any example how i can connect it with NodeJS? — Despo, Jan 24 '19 at 12:52
You will need a few things, i recommend MSSQL or MongoDB (use mixed authentication if possible windows and login), NodeJS, and some drivers. Here is an example of querying from the DB but you can insert into or delete in the same way. Here are a few examples http://www.tutorialsteacher.com/nodejs/access-sql-server-in-nodejs **and** https://stackoverflow.com/q/45891998/7626277 — O.O, Jan 24 '19 at 13:16

Save, show and delete json file

1 Answers1