Как изменить код, чтобы в массиве объектов не попадались одинаковые элементы?

Question

[progra1337mist]

<div class="shop">
  <div class="shop_container">
    <div class="shop_name">Store</div>
  </div>
</div>
<div class="shop">
  <div class="shop_container">
    <div class="shop_name">Shop</div>
  </div>
</div>
<div class="shop">
  <div class="shop_container">
    <div class="shop_name">Store</div>
  </div>
</div>
<div class="shop">
  <div class="shop_container">
    <div class="shop_name">Magazin</div>
  </div>
</div>

<div class="shop">
  <div class="shop_container">
    <div class="shop_name">Magazin</div>
  </div>
</div>

var arr = [];
    var shops = document.querySelectorAll('.shop');
    for (var i = 0; i < shops.length; i++) {
        var container = document.querySelectorAll('.shop_container');
        var name = container[i].querySelector('.shop_name');
        let shop =
            {
                name: name.innerHTML,
            }
        ;
        arr.push(shop);
    }
    console.log(arr);

Данный код, выводит в консоль такую запись:
Array(5)
0: {name: "Store"}
1: {name: "Shop"}
2: {name: "Store"}
3: {name: "Magazin"}
4: {name: "Magazin"}
А нужно, чтобы в цикле проходила проверка, которая узнает есть ли в массиве объектов уже объект с таким названием, и если он есть - то цикл сбрасывается и не пушит объект в массив.
И по итогу в консоль должна выводиться такая запись:
Array(3)
0: {name: "Store"}
1: {name: "Shop"}
2: {name: "Magazin"}
Буду очень благодарен за помощь!

Answer 1

[0xD34F]

Выдёргиваем из элементов массив текстов, уникализируем его, собираем массив объектов:

const arr = Array.from(
  new Set(Array.from(document.querySelectorAll('.shop_name'), n => n.innerText)),
  n => ({ name: n })
);

Или, собираем объект, где ключами будут тексты элементов, а значениями объекты, затем выдёргиваем из полученного объекта массив значений:

const arr = Object.values(Array.prototype.reduce.call(
  document.getElementsByClassName('shop_name'),
  (acc, { textContent: name }) => (acc[name] ??= { name }, acc),
  {}
));

Comments

[progra1337mist]

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

[0xD34F]

progra1337mist, дополнить нельзя. Можно переписать не на сто процентов, а так где-то на восемьдесят:

const shopNamesElements = document.querySelectorAll('.shop_name');
const uniqueShopNames = [];
const arr = [];

for (let i = 0; i < shopNamesElements.length; i++) {
  const name = shopNamesElements[i].innerText;
  if (!uniqueShopNames.includes(name)) {
    uniqueShopNames.push(name);
    arr.push({ name });
  }
}

[progra1337mist]

0xD34F, Спасибооо!