Как конвертировать динамически добавленные элементы в JSON и обратно - PullRequest
Новая
       6

Как конвертировать динамически добавленные элементы в JSON и обратно

0 голосов
/ 17 сентября 2018

Быстрый контекст: Это приложение, имитирующее магнитную доску.Я хочу сохранить местоположение и идентификатор всех перетаскиваемых элементов, а затем загрузить файл и установить эти свойства и создать / удалить отсутствующие / ненужные элементы.Чтобы сохранить файлы, я использую Node.js и Electron.

Я подумал, что было бы целесообразно использовать JSON, поскольку он может конвертировать напрямую из JS, но как это сделать с неизвестным количеством элементов?

Этот код Javascript добавляет один из этих элементов на мою страницу при нажатии соответствующей кнопки: 

$("#item1").mousedown(function (e){

    var newpin = document.createElement("DIV");
    var pinimage = document.createElement("IMG");

    pinimage.setAttribute("src", "Media/2D_Container_Alfa.jpg");
    pinimage.setAttribute("id", "Alfa");
    pinimage.setAttribute("height", "70px");

    newpin.setAttribute("position","relative");
    newpin.setAttribute("top","20px");
    newpin.setAttribute("left","140px");
    newpin.setAttribute("display","block");

    newpin.setAttribute("class", "draggable ui-draggable ui-draggable-handle");
    newpin.appendChild(pinimage);
    document.body.appendChild(newpin);
});

$("#item2").mousedown(function (e){

    var newpin = document.createElement("DIV");
    var pinimage = document.createElement("IMG");

    pinimage.setAttribute("src", "Media/2D_Container_Bravo.jpg");
    pinimage.setAttribute("id", "Bravo");
    pinimage.setAttribute("height", "70px");

    newpin.setAttribute("class", "draggable ui-draggable ui-draggable-handle");
    newpin.appendChild(pinimage);
    document.body.appendChild(newpin);
});

-

Ответы [ 2 ]

0 голосов
/ 17 сентября 2018

Вы имеете в виду 

localStorage.setItem("draggable",JSON.stringify($('.draggable').map(function(){
  return this.id
}).get()));

или 

$.post("saveonserver",{"data":JSON.stringify($('.draggable').map(
  function(){
    return this.id
  }).get()
});
0 голосов
/ 17 сентября 2018

Вы можете создать переменную JSON вне любых функций, которые могут уменьшить ее область действия, а затем добавить их в нужное вам время. 

let myJson = {};

function onMouseDown(event) {
    let thisId = event.id;
    myJson[thisId] = location;
}
...