How to update local json data through javascript on submit

Question

I have in file JSON data which I'm displaying on UI and a form from which user can update data. How can I update the JSON data with the values entered by the user on the form and render it on the UI after submit.

 //Html code
 <div id="myModal" class="modal">
   <!-- Add movie Modal content -->
   <div class="modal-content">
     <span class="close" onclick="closeModal()">&times;</span>
     <form name="submitmovie" onsubmit="addMov()">
       <label>Enter Movie Name</label>
       <input type="text" name="movie-name" id="mnane" placeholder="enter movie name">
       <label>Year</label>
       <input type ="number" name="movie-year" id="myear" placeholder="movie-year">
       <label>Poster Url</label>
       <input type ="url" name="movie-poster" id="mposter" placeholder="movie-poster-url">
        <button class="addMovie" type = "submit">Submit</button>
      </form>
    </div>
  </div>

  <script type="text/javascript">
    function addMov(){
      var name = document.getElementById("mnane").value;
      var year = document.getElementById("myear").value;
      var url = document.getElementById("mposter").value;
      console.log(name,year,url);
      // add();
      movieList.push({
        "name":name,
        "year":year,
        "url":url
      });
      renderMovieCards();
    }
  </script>

[`Fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). — Jack Bashford, Apr 13 '19 at 11:17
The browser has limited authorization when it comes to creating files on the user's machine. You would need yo use a server to manipulate your JSON file, or just switch to a different format, like localStorage(which would be relevant only in a given browser) — i.brod, Apr 13 '19 at 11:36
Possible duplicate of [How to write data to a JSON file using Javascript](https://stackoverflow.com/questions/32546100/how-to-write-data-to-a-json-file-using-javascript) — Heretic Monkey, Apr 13 '19 at 16:30

score 0 · Answer 1 · answered Apr 13 '19 at 11:40

To perform update on a JSON file you will need a backend or some third party product that act like backend eg. Firebase.

If we talking just locally (changes persist on page refresh) what you can is:

<div id="myModal" class="modal">
  <!-- Add movie Modal content -->
  <div class="modal-content">
    <span class="close" onclick="closeModal()">&times;</span>
    <form name="submitmovie" onsubmit="addMov()">
      <label>Enter Movie Name</label>
      <input type="text" name="movie-name" id="mnane" placeholder="enter movie name">
      <label>Year</label>
      <input type="number" name="movie-year" id="myear" placeholder="movie-year">
      <label>Poster Url</label>
      <input type="url" name="movie-poster" id="mposter" placeholder="movie-poster-url">
      <button class="addMovie" type="submit">Submit</button>
    </form>
  </div>
</div>

<script type="text/javascript">
  // persist mechanics
  // on app load try to load data from localStorage
  const movieList = localStorage.getItem('movieList');
  // if it's there assign it to moveList, else leave it as is (with json data)
  if (movieListLocalStorage) {
    movieListLocalStorage = JSON.parse(movieListLocalStorage);
  }
  function addMov() {
    var name = document.getElementById("mnane").value;
    var year = document.getElementById("myear").value;
    var url = document.getElementById("mposter").value;
    console.log(name, year, url);
    // add();
    movieList.push({
      "name": name,
      "year": year,
      "url": url
    });
    // since you are using movieList i am assuming it has predefined json data assigned
    // persist updated data within localStorage
    localStorage.setItem('movieList', JSON.stringify(movieList))

    // pass updated data to render function
    renderMovieCards(movieList);
  }
</script>

I Tried with way but still, values are not getting updated in the local storage. Here is my code pen link for the whole code. https://codepen.io/pb09/pen/ROZzer Can you please let me know where i'm doing wrong. — Praveen Bhagat, Apr 14 '19 at 05:30

How to update local json data through javascript on submit

1 Answers1