List CRUD with JQuery

Question

List CRUD with JQuery

Navigation

#1 by (2 votes)

0

I am creating a list of items with JQuery that is rendered on the screen according to what is typed in the input.

To display the on-screen element (item name, change button, and remove button) javascript adds the value typed into an array of objects along with an ID that I called idSymbolic to be able to identify each item in time of deleting or changing an item, then a array.map() is performed to render the array items on the screen.

But the problem is that every time I type new text to create and render the new item, array.map renders everything in the array including the items already on the screen, making my list redundant. / p>

My doubts are as follows:

1 - How do I make the array.map render only the items that are no longer on the screen?

2 - When deleting an item from the screen by clicking the remove button, how do I delete only that clicked item (from screen and array).

HTML

<div class="">
   <div id="lista-itens">
     <div id="titulo">Lista de Itens</div>
  </div>
</div>

<div class="">
  <input type="text" id="txtItem">
  <button type="button" onClick="save()">SALVAR</button>
</div>

Javascript / JQUERY

var itens = [];
var idSimbolico = 0;

function save(){

  var id = idSimbolico += 1;
  var txtItem = $('#txtItem').val();

  itens.push({
    id: idSimbolico,
    nome: txtItem
  });

  itens.map(item => {
  $("#titulo").append('
    <div id="item">
      <div id="nomeDoItem">${item.nome}</div>
      <input type="hidden" value="${item.id}">
      <div>
        <button>Alterar</button>
        <button>Deletar</button>
      </div>
    </div>
    ');
    });
  }

javascript html jquery

asked by anonymous 08.04.2018 / 17:45

1 answer

Count Database result [closed] Error: Uncaught (in promise): Error: PERMISSION_DENIED: Permission denied

score 2 · Accepted Answer

You started well in your approach, however misunderstood as .map works.

.map will return a new array, based on that you can generate an array of strings, using join you can join them in a single string.

After that, you need to clear the element, and then include the items you want.

All this can be simplified with a .reduce as well. In addition, you can transform strings into jQuey objects, so you can add behaviors / events ... There are several possibilities.

I took the liberty of giving an improvement to your sample code.

let idSimbolico = 0
const itens = []
const $input = $('#txtItem')
const $container = $("#titulo")

const save = () => {
  idSimbolico += 1

  itens.push({
    id: idSimbolico,
    nome: $input.val()
  })

  render()
}

const render = () => {
  const html = itens.map(item => {
    return '
    <div id="item">
      <div id="nomeDoItem">${item.nome}</div>
      <input type="hidden" value="${item.id}">
      <div>
        <button>Alterar</button>
        <button>Deletar</button>
      </div>
    </div>
    '
  }).join('')

  $container.empty()
  $container.append(html)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="">
  <div id="lista-itens">
    <div id="titulo">Lista de Itens</div>
  </div>
</div>

<div class="">
  <input type="text" id="txtItem">
  <button type="button" onClick="save()">SALVAR</button>
</div>