如何将数组对象属性映射到DOM元素数组并完成赋值？

Got it, let's get your product list populated correctly! You're already thinking in the right direction with map, but we need to connect that data to your DOM elements properly. Here's a tailored solution for your code:

First, Fix a Small Typo #

Quick heads-up: I spotted a typo in your productList array—your first product uses descriptiom instead of description. That would break description rendering, so let's fix that first.

Solution 1: Update Existing DOM Elements #

If you want to keep the .product elements you already have in your HTML, we can loop through your product data and match each item to the corresponding DOM element:

const productList = [
  { 
    photo: '../images/products/pizza/DSC_8740-002-Pitstsa-4-syra.jpg', 
    title: '4 сыра', 
    description: [ 'more', 'description' ], // Fixed typo here
    price: 125, 
    weight: 520 
  }, 
  { 
    photo: '../images/products/pizza/DhZBDqqwZzgTSYudncCZVQjOHHfQh9cs.jpg', 
    title: 'some title', 
    description: [ 'some', 'description' ], 
    price: 140, 
    weight: 850 
  }
];

const products = document.querySelectorAll('.product');

// Loop through each product and its matching DOM element
productList.forEach((product, index) => {
  const currentProduct = products[index];
  if (!currentProduct) return; // Skip if there's no matching DOM element

  // Update product image (only if the element exists)
  const productImage = currentProduct.querySelector('.product__image');
  if (productImage) {
    productImage.src = product.photo;
    productImage.alt = product.title; // Add alt text for better accessibility
  }

  // Update product name
  const productName = currentProduct.querySelector('.product__name');
  if (productName) productName.textContent = product.title;

  // Update product description (convert array to a readable string)
  const productDesc = currentProduct.querySelector('.product__description');
  if (productDesc) productDesc.textContent = product.description.join(' ');

  // Update product price
  const productPrice = currentProduct.querySelector('.product__price');
  if (productPrice) productPrice.textContent = `${product.price}.-`;
});

What this does: #

• Uses forEach to pair each item in productList with the corresponding .product element in your HTML (via the index).
• Checks if each sub-element (image, name, etc.) exists before updating it—this avoids errors if some .product elements don't have all the same children (like your second product missing the image).
• Converts the description array to a readable string with join(' ')—you can swap the space for ', ' or another separator if you prefer.

Solution 2: Dynamically Create Product Elements #

If you don't want to hardcode .product elements in your HTML (perfect for when you have an unknown number of products), you can build elements from scratch and append them to the container:

const productList = [/* Your corrected product data here */];
const productContainer = document.querySelector('.product-list');

productList.forEach(product => {
  // Create a new .product div
  const productElement = document.createElement('div');
  productElement.classList.add('product');

  // Populate the element with HTML using your product data
  productElement.innerHTML = `
    <img class="product__image" src="${product.photo}" alt="${product.title}">
    <p class="product__name">${product.title}</p>
    <p class="product__description">${product.description.join(' ')}</p>
    <p class="product__price">${product.price}.-</p>
    <button class="product__btn"><i class="fas fa-plus"></i></button>
  `;

  // Add the new product to the container
  productContainer.appendChild(productElement);
});

This way, every item in your productList gets its own fully populated .product element—no need to manually add elements to your HTML later.

内容的提问来源于stack exchange，提问作者Tireless Coder