Почему localStorage.getItem(key) отрабатывает только после второго клика?

Brendan Castaneda,Спасибо огромное, это именно то что нужно. Вы даже с css заморочились, была бы возможность несколько плюсов бы поставил)

Почему localStorage.getItem(key) отрабатывает только после второго клика?

Извиняюсь за сумбур и лишние абстракции, постараюсь более лаконично описать. По клику на одну из кнопок в разметку просто выводятся введенные value, в reduce я считаю общее количество этих value. По факту мне нужно всего лишь посчитать общую сумму всех value и если сумма превышает passengersMax, то не пускать в ветку else, то есть не отрисовывать рендер чтобы вывести допустим сообщение: "В данном заказе вы превысили максимальное количество человек в заказе".

Почему localStorage.getItem(key) отрабатывает только после второго клика?

У меня есть максимальное количество пассажиров const passengersMax = 3; , которые могут присутствовать в данном заказе, это абсолютный максимум (с одной каюты или же общее количество с двух кают). Так же на 49 строке я считаю общую сумму пассажиров в одной или двух каютах сразу:

accommodationSum = currentTariff.reduce((acc, curr) => acc + curr.accommodation, 0);

После получения общей суммы мне нужно выполнить несколько условий, в данном случае условие на 36 строке отрабатывает, а else if на 38 строке не отрабатывает, скорее всего из за того что я в неправильном месте считаю accommodationSum да и глобальная переменная undefined, в этом моменте я запутался и не знаю как правильно посчитать общую сумму для сравнения в условии и рендера разметки. https://codepen.io/Andy41/pen/ExpQdVo?editors=1012 Если я перенесу reduce выше чем if условия по коду, то будет та самая проблема с которой я обратился ранее, считает со 2 щелчка.

Как создать массив объектов с определенными свойствами на основе другого массива объектов?

Добрый вечер, подскажите пожалуйста, как можно реализовать добавление объектов в один общий массив? Сейчас по клику объекты отрисовываются вместе со своим родительским массивом отдельно и мне нужно доработать функционал. Я пытался сам разобраться, но у меня не получилось. https://jsfiddle.net/qbtLudpj/14/

Почему localStorage.getItem(key) отрабатывает только после второго клика?

Спасибо за ответ, в проекте колоссальное нагромождение кода и я долго крутил по вашему совету "состояние" и наконец-то нашел актуальную причину почему срабатывает после второго щелчка. В проекте у меня есть еще условия, по которым я определяю отрисовывать ли HTML или нет (36 строка), так же я понял что если попытаться посчитать общую сумму accommodationSum выше условий, то будет считаться не правильно, а в данном случае я пишу reduce ниже условии и почти приблизился к нужному результату, но всё равно условия отрабатывают неправильно:
https://jsfiddle.net/u2qc754s/2/
Подскажите пожалуйста как будет более структуированно верно считать сумму и отрисовывать рендер?

Как создать массив объектов с определенными свойствами на основе другого массива объектов?

Спасибо большое, всё работает как и задумывалось. Осталось разобраться в данном коде)

Как запретить отрисовку функций рендера html по результату запроса fetch по условию?

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

Как запретить отрисовку функций рендера html по результату запроса fetch по условию?

Спасибо, попробую.

Как правильно выводить данные из дата атрибутов родителей в дочерние элементы в определенном порядке?

Спасибо, все отлично работает. Буду разбираться в данной реализации.

Как правильно провалидировать поля формы?

Спасибо, то что нужно.

Как с помощью js получить данные из переменной php?

Сергей Соколов, Спасибо, у меня конечно нету доступа и полномочий к части бэка, но во всяком случае я понял что есть относительно проблемные места)

Как с помощью js получить данные из переменной php?

Спасибо большое, я не знал что можно прокинуть данные в дата атрибут и получить заветный boolean) А что вы имеете ввиду под чистыми данными в разметке? Как минимум данные без тернарника в данном случае?

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

Сергей Соколов, Ну так то да, выглядит убедительно и весьма правильно),
но от меня хотят по бумажке получить на 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)

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

Сергей Соколов, По факту например 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 добавить сугубо для питомцев?

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

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

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

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

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.

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

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

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

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

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?

Как реализовать правильное поведение удаления всех данных из localStorage?

Сергей Соколов, Да вот я тоже догадался о том что стирать это дело не так то уж и просто если оставить глобальный массив на своём месте и всё равно придется немножко логику менять чего я опасаюсь) Ладно, спасибо за информацию еще раз, может созрею как нибудь и попробую оба варианта.

Как реализовать правильное поведение удаления всех данных из localStorage?

Спасибо, да работает правильно но возможно ли как то реализовать данный функционал в контексте кода который я прикрепил в вопросе? Просто у меня в проекте достаточно много всего "подкручено" к данной стилистике что ли и я опасаюсь что-то поломать как обычно.