how to save dynamically created elements to json using Javascript?

Question

I have a simple block which is created automatically by user, I want this element to be saved automatically after its created.

HTML

 <div class="main-container">
   <ul class="menu-options">
      <li id="btn-add-movie-block" class="menu-option">Add movie
    block
      </li>
   </ul>
 </div>

JavaScript file

var jsonData =json.parse('{"movies:[]"}');

function addMovieBlock() {
    var newMovie = $('<div id="movie-block">New Movie</div>');
    $(".main-container").append(newMovie);
}    

$("#btn-add-movie-block").on("click", function () {
    addMovieBlock();
}

<ul class="menu-options">
    <li id="btn-add-movie-block" class="menu-option">Add movie
        block</li>
</ul>

I just want to save this block to the JSON data above? How can I achieve this using a simple method?

Hien Nguyen · Accepted Answer · 2019-06-16 23:29:19Z

1

Your JSON parse incorrect format, change to var jsonData =JSON.parse('{"movies":[]}');

You can add by push jsonData.movies.push(newMovie);

var jsonData =JSON.parse('{"movies":[]}');

function addMovieBlock() {
    var newMovie = $('<div id="movie-block">New Movie</div>');
    $(".main-container").append(newMovie);
    jsonData.movies.push(newMovie);
    console.log(jsonData)
}    

$("#btn-add-movie-block").on("click", function () {
    addMovieBlock();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
   <ul class="menu-options">
      <li id="btn-add-movie-block" class="menu-option">Add movie
    block
      </li>
   </ul>
 </div>




<ul class="menu-options">
    <li id="btn-add-movie-block" class="menu-option">Add movie
        block</li>
</ul>

answered Jun 16, 2019 at 23:29

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zer00ne · Accepted Answer · 2019-06-17 01:54:18Z

Use a normal object literal to build up your list don't use JSON.parse() at all unless you are receiving a JSON string and need to work with an object. In the following demo is an add/delete list, the object you'll see in the console will be there as long as your page doesn't refresh -- you stringify it when you need to. As Mr. Nguyen said use push() to add. Although not requested I added a delete function that uses splice(). This only adds/deletes the data within the <li> not the markup.

It's cleaner to have just the data in your data structures (JSON strings, objects, arrays, etc.) and generate DOM objects separately when needed (which is when you need to display data in a browser). If you still want to keep the markup change:
```
data.movies.push(movie);
```
to:
```
data.movies.push(newMovie);
```
in addMovie() callback function.
You are duplicating id="movie-block" once user clicks the second time. It's invalid HTML to have duplicated ids plus it will most likely cripple jQuery/JavaScript. In jQuery you can use classes 99% of the time. Avoid using ids as much as possible.

let data = {
  movies: []
};

function addMovie() {
  const movie = $('.movieInput').val();
  const newMovie = $(`<li class="movie">${movie} <b>&ndash;</b></li>`);
  data.movies.push(movie);
  $('.movieInput').val('');
  $(".movies").append(newMovie);
  console.log(data);
}

function delMovie() {
  let idx = $(this).closest('li').index();
  $(this).closest('li').remove();
  data.movies.splice(idx, 1);
  console.log(data);
}

$(".add").on("click", addMovie);
$('.movies').on('click', 'b', delMovie);

:root {
  font: 400 16px/1.2 Arial
}

.menu {
  list-style: none;
  text-indent: -5vw;
}

input {
  font: inherit;
  display: inline-block
}

a {
  text-decoration: none
}

b {
  font-size: 1.2rem;
  cursor: pointer;
}

.as-console-wrapper {
  width: 50%;
  margin-left: 50%;
  min-height: 80%;
}

.as-console-row.as-console-row::after {
  content:'';
  padding:0;
  margin:0;
  border:0;
  width:0;
}

<main class="main">
  <ul class="menu">
    <li class='option'>
      <input class='movieInput' list='movieList' autocomplete='off'>
      <datalist id='movieList'>
        <option value='Pulp Fiction'>
        <option value='Kung Fu Hustle'>
        <option value='True Romance'>
        <option value='Old Boy'>    
      </datalist>
      <a href='#/' class='add'> <b>&plus;</b> Add Movie</a>
    </li>

  </ul>
  <ol class='movies'></ol>
</main>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Collectives™ on Stack Overflow

how to save dynamically created elements to json using Javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related