Как сформировать массив только тех полей, которые изменились, чтобы потом их отправить?

Question

[Анастасия]

Здравствуйте. В админке есть таблица со списком записей из БД. У всех записей есть некоторые поля, которые можно отредактировать. Мне нужно, чтобы пользователь мог изменить поля и сохранить изменения. Как собрать массив для отправки его на сервер? То есть мне нужно собрать массив, в котором будут только те поля, которые редактировались.
Примерно так выглядит таблица:
https://jsfiddle.net/pos2yb0j/1/

А вот такой массив мне нужно получить, если у 1 записи будет изменено info на 123, а у второй записи изменён статус на value 3:

[
   {id: a1, info: '123', status: 'value 2'},
   {id: a2, status: 'value 3'},
]

Момент с которым я столкнусь:
item.addEventListener('input', function() {.отслеживает все изменения, даже если было написано: "Молоко" и я допишу "1", а потом сотру "1", то этот input всё равно сохранит эту правку и запишет её в массив. Чтобы такого не было мне нужно будет хранить в памяти содержимое всех полей и сравнивать их перед отправкой. Короче - пускай лучше перезаписывается, потому что полей действительно может быть очень много и хранить это всё в памяти не очень хочется.

Comments

[ThunderCat]

Не надо ничего хранить, в смысле зачем вам знать что там изменилось? Сохранил пользователь все без изменений - ну и ок, кому от этого жарко/холодно не понятно.

[Анастасия]

ThunderCat, а что, на сервер не будут уходить поля, которые не редактировались?

Answer 1

[Алексей Ярков]

Запоминаем изначальное состояние полей
Перед отправкой берём текущее состояние
Вычисляем diff между объектами

Comments

[Анастасия]

походу спойлер зря придумали. а ещё нужно чуть внимательнее читать, потому что мне нужно собрать только изменённые поля

[Алексей Ярков]

Анастасия, теперь идём по ссылке, втыкаем в ПЕРВЫЙ же пример и осознаём происходящее.
Пакет, который по ссылке, выдаёт структуру, где видно что ДОБАВИЛОСЬ, ИЗМЕНИЛОСЬ или УДАЛИЛОСЬ.

нужно чуть внимательнее читать

Не знаю что вам помешало последовать своему же собственному совету ))

[Анастасия]

Алексей Ярков, ТЕПЕРЬ ПЕРЕЧИТЫВАЕМ ВОПРОС И ВТЫКАЕМ В ЭТУ КОНСТРУКЦИЮ:
item.addEventListener('input', function() {.
которая отслеживает изменения input. А ЕЩЁ ПЕРЕЧИТЫВАЕМ ОДИНАКОВЫЕ ОТВЕТЫ ДРУГИХ ПОЛЬЗОВАТЕЛЕЙ И ВТЫКАЕМ, ЧТО Я НЕ ХОЧУ СРАВНИВАТЬ ВСЁ И ВСЯ!

[Алексей Ярков]

Анастасия, о боги, сколько экспрессии )) Нет у вас выхода другого просто напросто. Что вы хотите - это только хотелки. Вот было в поле слово СТРОКА, ввёл я в поле СТРОКА1, а потом 1 убрал. Соответственно input отработает, но состояние поля было изменено, а содержимое по факту осталось тем же.

[Анастасия]

Алексей Ярков,

о боги, сколько экспрессии )) Нет у вас выхода другого просто напросто. Что вы хотите - это только хотелки. Вот было в поле слово СТРОКА, ввёл я в поле СТРОКА1, а потом 1 убрал. Соответственно input отработает, но состояние поля было изменено, а содержимое по факту осталось тем же.

ну прочти же ты вопрос.... Полностью! Я даже этот момент там описала

Answer 2

[ThunderCat]

Мне нужно, чтобы пользователь мог изменить поля и сохранить изменения. Как собрать массив для отправки его на сервер?

Форма? Если просто из формы отправлять не позволяет религия/архитектура - в жс - формДата(форма) и отправляете аяксом.

Comments

[Анастасия]

Вам религия не позволяет внимательно прочесть вопрос?

То есть мне нужно собрать массив, в котором будут только те поля, которые редактировались.

Как formData будет выбирать, что редактировалось, а что нет?

[ThunderCat]

Анастасия, Единственное что не понятно - зачем отслеживать измененные поля? Есть какая-то объективная причина так извращаться?

Answer 3

[Sergio]

По-моему надо запомнить начальное состояние (при загрузке страницы), потом при отправке формы пройтись по всем строчкам таблицы и проверить, совпадает ли значение с изначальным. Если нет - добавить соотв. запись в массив.

Что-то вроде такого:

var initialState = serialize();

function serialize() {
    var data = [];
    var rows = myTable.rows;

    for (var i = 1; i < rows.length; i++) {
        var row = rows[i];
        var id = row.cells[0].textContent;
        var info = row.cells[2].firstChild.value;
        var status = row.cells[3].firstChild.value;
        data.push({
            id: id,
            info: info,
            status: status
        });
    }

    return data;
}

function onSubmit() {
    var data = [];
    var currentState = serialize();

    for (var i = 0; i < currentState.length; i++) {
        var entry = currentState[i];
        var oldEntry = initialState.find(e => e.id == entry.id);
        if (oldEntry.state != entry.state || oldEntry.info != entry.info) {
            data.push(entry);
        }
    }

    // отправить реквест с данными из data
}

Comments

[Анастасия]

никому не позволяет религия прочесть внимательно вопрос...

[Анастасия]

[Sergio]

Анастасия, я и не кликал туда, зачем это в спойлере, если важная информация?

[Анастасия]

Sergio, это не важная информация. Важное это то, что я не могу собрать в массив данные, потому что я не знаю как

[Sergio]

хранить в памяти не очень хочется - насчет этого не согласен, DOM-элементы у вас уже будут в памяти храниться во время рендеринга страницы, не вижу смысла эконопить на паре килобайтов

если же у вас миллион записей на странице показывается, то жто уже вопрос к архитектуре

[Sergio]

я добавил код в ответ, посмотрите

[Анастасия]

Sergio, то есть если в столбце info будет храниться 500 символов, которые даже не менялись, то на сервер я буду отправлять эти 500 символов? зачем-то...

[Sergio]

всё верно, все так и делают обычно

[Sergio]

если ваше API поддерживает частичное обновление, то это другое дело, но я сомневаюсь что кто-то стал бы заморачиваться из-за 500 символов

[Sergio]

мне кажется вы преждевременно оптимизируете в ненужных местах

у нас же тут JavaScript всё-таки, а не С

[Анастасия]

Sergio,

всё верно, все так и делают обычно

поэтому всякие booking.com и facebook.com работают так плохо. потому что не оптимизируют такие вещи вообще.

Я такой массив как нефиг делать собрала бы на php. Я там могу называть ключи как хочу и когда хочу, а здесь массив вообще не собирается по моим условиям