Как удалить объекты с одинаковым id?

Question

[Andy Koshman]

Всем привет, в задаче по клику нужно удалить из двух массивов names и price два объекта которые связаны одним id (если у кликнутого names id: 1, то удаляются 2 объекта массивов names с id: 1 и price с id: 1). Данный функционал в принципе отрабатывает но проблема в том, что если добавятся два объекта с одинаковыми id (данное заявление от меня не зависит), то в price удалятся все объекты имеющие одинаковый id. Как можно расширить данный функционал для того чтобы удалялись объекты с актуальным id в не зависимости от дублирования?
Cсылка:
https://jsfiddle.net/7kdegav0/3/

Код:

let names = [{
    id: 1,
    name: 'Jack'
  },
  {
    id: 1,
    name: 'Bob',
  },
  {
    id: 2,
    name: 'John'
  }
]

let price = [{
    id: 1,
    price: 100,
  },
  {
    id: 1,
    price: 100
  },
  {
    id: 2,
    price: 150
  }
]

 // по факту при попытке удаления условно 'Bob' с id: 1, в price удалятся все объекты имеющие id: 1

function removeItem(e) {
  if (e.target.classList.contains("close")) {
    let info = e.target.closest(".item");
    let idx = [...block.children].findIndex(
      (el) => el.querySelector(".close") == e.target
    );
    deleteState(idx);
  }
}

function deleteState(index) {
  if (index > -1) {
    const id = names[index].id;
    price = price.filter(
      (i) => i.id !== id
    );
    names.splice(index, 1);
  }
}

Comments

[Виктор Майоров]

А что является "актуальным id"? Первый по счету или второй?
Нужно ли удалять все id сверху или снизу и оставлять только один?

[Kentavr16]

Насколько я понимаю - id как идентификатор обязан быть уникальным для обьекта. Либо же должен быть другой уникальный признак, по которому можно будет идентифицировать обьекты и/или записи

[Andy Koshman]

Скорее всего дубляжи нужно удалять по индексу массива, если 'Bob' условно index === 1, то у массива price удаляется объект индекс которого тоже равен 1.

[Сергей Соколов]

Andy Koshman, так names и price чётко связаны ещё и позициями элементов в массиве?

Если связаны, то лучше один раз в начале их свести в единую структуру данных, с которой и работать дальше.

Answer 1

[Сергей Соколов]

// вместо
    price = price.filter(
      (i) => i.id !== id
    );

// попробуйте
  const priceIndex = price.findIndex(({ id: priceId }) => priceId === id);
  if (priceIndex > -1) price.splice(priceIndex, 1);

и будет удаляться только один из price, первый попавшийся с соотв. id.

Comments

[Andy Koshman]

Спасибо большое работает так как нужно. Подскажите еще пожалуйста за данный параметр { id: priceId } как называется такая запись? Я очень часто вижу подобное в параметрах вида {} и хотел бы подробнее изучить этот момент.

[Сергей Соколов]

Andy Koshman, см. деструктурирующее присваивание

В данном случае из входного аргумента функции, объекта, сразу вытаскиваем его свойство id и переименовываем его в priceId, чтобы не конфликтовало с нужным внешним id.

Т.е. внутри этой стрелочной функции появится переменная priceId со значением arg.id переданного в функцию объекта.

То же самое:

(inputArg) => {
  const priceId = inputArg.id;
  // ...
}

[Andy Koshman]

Сергей Соколов, Я понял, спасибо большое за информацию.

[Andy Koshman]

Сергей Соколов, Добрый вечер, у меня назрел еще один небольшой вопрос по поводу данного кода удаления который вы мне предложили временем ранее:

const priceIndex = price.findIndex(({ id: priceId }) => priceId === id);
  if (priceIndex > -1) price.splice(priceIndex, 1);

Всё работает хорошо, но я заметил что поскольку действительно удаляется первый найденный объект в соответствии с id, то имея такую структуру массива и кликая на второй элемент с price: 200 например, удалиться первый объект с price: 100:

let price = [{
    id: 1,
    price: 100,
  },
  {
    id: 1,
    price: 200
  },
  {
    id: 2,
    price: 150
  }
]

Подскажите пожалуйста как мне отловить актуальный объект для удаления? Может нужно в объекте еще какой-то ключ сформировать, что-то типа флага или доп. id?

[Сергей Соколов]

Andy Koshman, может, индекс массива как-то передавать? И удалять тогда прямо по этому индексу.

[Andy Koshman]

Сергей Соколов, Да точно, я же в этой функции removeItem() отлавливаю актуальный index первого массива и могу удалить в данном условии аналогичный index во втором массиве насколько я понял:
if (index > -1) {
price.splice(index, 1);
}
Пока вроде работает)

[Andy Koshman]

Сергей Соколов, А если предположим добавится еще один массив с животными:

const pets = [{
    id: 1,
    type: 'Cat'
  },
  {
    id: 1,
    type: 'Dog',
  },
  {
    id: 1,
    type: 'Hamster,
  },
  {
    id: 2,
    type: 'Parrot'
  }
]

В котором Cat и Dog относятся к Jack, а Hamster относится к Bob у всех одинаковые id === 1 и нужно при удалении Jack удалить Cat и Dog, то есть 1 объект names.name === "Jack"
и 2 объекта из массива pets, pets.type === "Cat" и pets.type === "Dog". Можно ли как то такой вариант реализовать? Тут уже индекс массива наверное не подойдёт, а вариант с findIndex и splice удаляет как обычно первый попавшийся id.

[Сергей Соколов]

В котором Cat и Dog относятся к Jack, а Hamster относится к Bob

Andy Koshman, это откуда следует такое? Схему данных надо как-то разумнее продумывать. Уже третья сущность, и отношения между тремя какие-то совсем эфемерные )

[Andy Koshman]

Сергей Соколов, Да я тоже это осознаю, но такого поведения требует мой backend и в связи с этим на меня уже пол хабра ополчилось за наличие одинаковых id в объектах, вот и фантазирую как разгребать)

[Сергей Соколов]

Andy Koshman, я так и не понял, откуда взялась связь:

В котором Cat и Dog относятся к Jack, а Hamster относится к Bob

[Andy Koshman]

Сергей Соколов, По факту например 2 пользователя себя проинициализировали и создался массив в котором значение id подтянулось из БД:

const names = [{id: 1, name: "Jack"},{id: 1, name: "Bob"}]

В моём случае id это идентификатор каюты, по типу каюта категории А(1) (категорий всего 5 5, А(1) === 1 А(2) === 2 и т. д.) и там находятся 2 человека сугубо в одной категории и автоматически из базы подтягивается значение price на основе id:

const price = [{id: 1, price: 100}, {id: 1, price: 100}]

Создалась 1 карточка с примерной информацией 2 человека, такое то имя, общая сумма.
Допустим еще один человек себя инициализирует, но уже в каюту категории Б(1), names = [{id: 1, name: "John"}]
Общий массив уже выглядит вот так:

const names = [{
  id: 1,
  name: "Jack",
  category: 'A(1)'
}, {
  id: 1,
  name: "Bob",
  category: 'А(1)'
}, {
  id: 1,
  name: "John",
  category: 'Б(1)'
}]

С price аналогично.
Пользователь видит 2 карточки где в одной 2 человека, а во второй 1, но в начинке у них одинаковый id у всех по факту.
Дальше по списку пользователь John выбирает допустим двух питомцев, соответственно у двух питомцев будет id === 1 исходя из того что id каюты === 1.
Логика приблизительно вот такая, я не знаю может быть какие то дополнительные id добавить сугубо для питомцев?

[Сергей Соколов]

Andy Koshman, ну традиционно для «ненавидящей» вас половины хабра : ) id всё-таки означает главный уникальный ключ, индивидуальный для каждой штуки. Отсюда когнитивный диссонанс и искры из глаз )

Логичнее, наверное, мух отдельно, каюты отдельно. Пусть будут Каюты с уникальными id:

const rooms = [{id: "А", class: 1, capacity: 2}, {id: "Б", class: 1, capacity: 2}, ];

Есть Гости:

const guests = [{id: 123, name: "Alice"}, {id: 125, name: "Bob"}, ];

Гости размещаются в Каютах:

const bookings = [
  { room: "А", guest: 123 }, { room: "А", guest: 125 }, { room: "Б", guest: 555 }, 
];

С питомцами примерно так же: отдельно как самостоятельный класс гостей. Или как атрибут гостя.

[Andy Koshman]

Сергей Соколов, Ну так то да, выглядит убедительно и весьма правильно),
но от меня хотят по бумажке получить на backend именно такую структуру:
const rooms = [{CabinCategoryID: 1, category: 'A(1)}, {CabinCategoryID: 1, category: 'A(1)'}];
const guests = [{CabinCategoryID: 1, name: "Alice"}, {CabinCategoryID: 1, name: "Bob"}];
Я так понял что это практически невозможно да и достаточно противоречиво, поэтому наверное мне стоит переговорить c backend)