Как содержимое двух div сохранять в json-объекты и оттуда же брать?

Question

[evgemiil]

Пока ищу информацию решил сюда написать может быстрее получиться и понятнее. Есть два блока с содержимыми, их заполняешь, меняешь и нажимаешь сохранить, сохраняется в json-объект. Как это реализовать с помощью json-объекта?

codepen.io/evgeniel/pen/yadYom

Comments

[Kovalsky]

Опишите какие у вас возникли сложности при решении задачи.

[evgemiil]

я не понимаю как сохранять в json-объект, как работать с ним как реализовать это

[Kovalsky]

evgemiil: ну, я бы на вашем месте в таком случае почитал бы хотя бы w3school. Но если все же хотите инфы, то как-то так: термина json-обьект не существует. По отдельности все существует - объект это такой тип данных в js, а JSON это формат использующийся для текстового описания объектов.

То есть в вашем случае чтобы использовать JSON, надо создать объект, сохранить в него все что вам нужно и использовать JSON.stringify() для того чтобы конвертировать объект в строку.

[evgemiil]

Никита Полевой: спасибо, есть на русском что то подобное?

[Kovalsky]

Конечно -https://learn.javascript.ru/json

Answer 1

[Roman]

Все очень просто, для того чтобы код был более красив, делаем ф-ю обработчик, тк форма у тебя не одна и чтобы не плодить евенты для баттонов

https://jsfiddle.net/dmh66g62/

Comments

[evgemiil]

я немножко не понял, а зачем выводить в инпут с классом json-data? мне надо json-объект сохранить содержимое в этих двух блоках, в одном чекбокс галочки, в другом список раскрывающий с полей ввода, попытался, но не понимаю вот codepen.io/evgeniel/pen/yadYom

[Roman]

"мне надо json-объект сохранить содержимое" - видимо я идиот но в упор не понимаю чего вам куда сохранить нужно

[evgemiil]

Roman: нет, видимо я не умею объяснять)
вот: На левом элементе нужно отобразить 3 чекбокса, на правом - раскрывающийся список и поле для ввода.
Кроме этого, у "увеличенных" div'ов должен быть крестик для закрытия, кнопка "Сохранить" и ссылка "Не сохранять" (ссылка и крестик сворачивают div обратно без сохранения изменений).
Данные для развернутых div'ов нужно брать из JSON-объекта, хранящегося в странице (конкретное место хранения JSON-объект на Ваше усмотрение). При нажатии на кнопку "Сохранить" изменения должны сохраняться в JSON-объекте и при повторном клике на свернутый div они должны должны быть отображены в div'e.
Под сворачиванием понимается возвращение div'а в исходное местоположение и удаление содержимого и замена на начальную картинку, которая была в нем.
Это задание чтобы попасть на курсы по JS, как я понял заполненное содержимое должно сохраняться в json файле каком то?

[Roman]

evgemiil: JSON.parce() - из json строки создает обьект, JSON.stringify() - создает json строку, остальное все просто

[Kovalsky]

"содержимое должно сохраняться в json файле каком то?"

Вот ответ на этот вопрос:

"конкретное место хранения JSON-объект на Ваше усмотрение"