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

Question

У меня есть массив, содержащий список автомобилей и 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);

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

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

Answer 1

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

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>

Answer 2

Переберите результаты в списке узлов и сравните идентификатор данных с идентификатором массива автомобилей. Если он совпадает - поменяйте атрибут 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>

Answer 3

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

• Сначала создайте объект из 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>

Answer 4

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

    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
        }
    })

Answer 5

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

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