CODEWITHSUNDEEP
javascriptajax
Despo
Despo

Reputation: 85

Save, show and delete json file

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

Upvotes: 1

Views: 544

Answers (1)

O.O
O.O

Reputation: 1419

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

Upvotes: 1

Related Questions