Сравнение двух массивов объектов

1

У меня есть массив, содержащий список машин и URL-адрес изображения.

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

Какой был бы лучший способ сделать это?

<!-- example of on page list of cars -->

<li class="car" data-id="car1">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car12">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car2">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car7">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

-

const cars = [
    {
        "id": "car1"
        "newImage": "imageaddress1"
    },
    {
        "id": "car2"
        "newImage": "imageaddress2"
    },
    {
        "id": "car3"
        "newImage": "imageaddress3"
    },
]

const allCarsNodeList = document.querySelectorAll('.car');
const allCars = Array.from(allProductsNodeList);

Первые соображения состоят в том, чтобы использовать фильтр, чтобы уменьшить количество отображаемых на машинах страниц только тех, которые были показаны, но я теряюсь на том, как сделать сравнение, поскольку ни в массиве, ни в атрибуте данных на странице прямо нет.

Я в основном смущен! Любые точки в правильном направлении были бы весьма полезны.

Теги:
arrays
compare

5 ответов

0
Лучший ответ

Перейдите по результатам в списке узлов и сравните идентификатор данных с идентификатором массива автомобилей. Если он совпадает - замените атрибут src на newImage.

Я также обновляю атрибут alt, чтобы вы могли видеть, что src имеет изменения (поскольку у меня нет ваших изображений)

const cars = [
    {
        "id": "car1",
        "newImage": "imageaddress1"
    },
    {
        "id": "car2",
        "newImage": "imageaddress2"
    },
    {
        "id": "car3",
        "newImage": "imageaddress3"
    },
]


const allCarsNodeList = document.querySelectorAll('.car');

allCarsNodeList.forEach(function(car, index){
  var id = car.getAttribute('data-id');
  var image = car.querySelector('img');
  cars.forEach(function(carItem){
     if(carItem.id == id) {
      image.setAttribute('src', carItem.newImage);
      image.setAttribute('alt', carItem.newImage) ;
     }
   })
})
<ul>
  <li class="car" data-id="car1">
      <img src="https://imageurl.com/currentImage" alt="currentImage">
  </li>

  <li class="car" data-id="car12">
      <img src="https://imageurl.com/currentImage" alt="currentImage">
  </li>

  <li class="car" data-id="car2">
      <img src="https://imageurl.com/currentImage" alt="currentImage">
  </li>

  <li class="car" data-id="car7">
      <img src="https://imageurl.com/currentImage" alt="currentImage">
  </li>

</ul>
Поделиться
1

Вы можете попробовать следующее

  • Сначала создайте объект из массива cars с id качестве ключа и URL-адресом изображения как значение
  • Теперь перебираем массив и видим, существует ли идентификатор элемента в созданном выше объекте. Если он существует, обновите src соответствующего img

const cars = [{"id": "car1","newImage": "imageaddress1"},{"id": "car2","newImage": "imageaddress2"},{"id": "car3","newImage": "imageaddress3"}];
// Create a map of id and newImage
const obj = cars.reduce((a,c) => Object.assign(a, {[c.id] : c.newImage}), {});
// Get all cars 
const allCars = Array.from(document.querySelectorAll('.car'));
// Iterate over cars
allCars.forEach(c => {
  //if entry exists in the object, update corresponding image
  if(obj[c.dataset.id]) c.querySelector("img").src = obj[c.dataset.id];
});
<li class="car" data-id="car1">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car12">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car2">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car7">
    <img src="https://imageurl.com/currentImage" alt="">
</li>
Поделиться
0

Эта работа для меня:

    const allCarsNodeList = document.querySelectorAll('.car');
    const allCars = Array.from(allCarsNodeList);
    console.log(allCars)
    allCars.forEach(car => {
        carId = car.dataset.id
        correspondingCar = cars.filter(each => each.id === carId)[0]
        console.log(correspondingCar);
        if (correspondingCar !== undefined) {
            car.children[0].src = correspondingCar.newImage
        }
    })
Поделиться
0

Вам необходимо выполнить следующие действия:

  1. Получите все элементы с классом car
  2. Пропустите этот элемент и найдите значение data-id данных для каждого элемента
  3. Используйте это значение data-id чтобы найти соответствующий объект в массиве cars
  4. Если объект найден, замените атрибут src этого образа, который находится внутри .car элемента, с newImage значением newImage объекта.

const cars = [{
    "id": "car1",
    "newImage": "imageaddress1"
  },
  {
    "id": "car2",
    "newImage": "imageaddress2"
  },
  {
    "id": "car3",
    "newImage": "imageaddress3"
  }
]

const allCarsNodeList = document.querySelectorAll('.car');
for (var i = 0; i < allCarsNodeList.length; i++) {
  var carId = allCarsNodeList[i].dataset.id;
  var matchCar = cars.find(({id}) => carId === id);
  if (matchCar) {
    allCarsNodeList[i].querySelector('img').src = matchCar.newImage;
  }
}
<li class="car" data-id="car1">1
  <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car12">2
  <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car2">3
  <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car7">4
  <img src="https://imageurl.com/currentImage" alt="">
</li>

Используйте inspect element на выходе, чтобы проверить, что атрибут src фактически изменен значением newImage

Поделиться
0

Поскольку ваши автомобили хранятся в массиве с уникальным идентификатором, я бы рекомендовал сначала преобразовать этот массив автомобилей в словарь (это увеличит производительность):

const cars = [
    {
        "id": "car1",
        "newImage": "imageaddress1"
    },
    {
        "id": "car2",
        "newImage": "imageaddress2"
    },
    {
        "id": "car3",
        "newImage": "imageaddress3"
    }
]

// create cars dictionary from carsList
const carsDictionary = cars.reduce((r, car) => {
    r[car.id] = car;
    return r;
}, {});

// iterate over nodes with car class
const carNodesDict = Array.from(document.querySelectorAll('.car'))
.forEach((node) => {
    const car = carsDictionary[node.dataset.id];
    if (car != null) {
      node.querySelector('img').src = car.newImage;
    }
});
<!-- example of on page list of cars -->

<li class="car" data-id="car1">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car12">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car2">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car7">
    <img src="https://imageurl.com/currentImage" alt="">
</li>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню