在数组 DOM Javascript 中为每个 object 添加图像

Question

const myBooks = [
  {
    title: 'Why We Sleep',
    author: 'Matthew Walker',
  },
  {
    title: 'All freinds',
    author: 'Christian'
  }
];
function createBookList(books) {
  let list = document.createElement('ul');
  books.forEach((sam) => {
    let li = document.createElement('li');
    let p = document.createElement('p');
    let image = document.createElement('img');
    image.src = 'https://media-amazon.com/7ov383lj3Rr';

    p.textContent = `${sam.title} - ${sam.author}`;
    li.style.listStyleType = 'none';
    list.appendChild(li);
    list.appendChild(p);
    list.appendChild(image);
  });
  return list;
}

Hey, I'm trying to add an image just for the first object of the array, but its appear for both object the image. So any advice

Answer 1

The callback function in Array.prototype.forEach() exposes three values; the current item in the array, the current index of the array, and the array that is being looped over.

With the second parameter, the index, you can assess where in the loop you are and create logic for a specific index, like the first item in the array 0 .

Oh, and I think you meant to append the paragraph and the image to the list item, not the list itself.

const myBooks = [
  {
    title: 'Why We Sleep',
    author: 'Matthew Walker',
  },
  {
    title: 'All freinds',
    author: 'Christian'
  }
];

function createBookList(books) {
  let list = document.createElement('ul');

  books.forEach((wiz, index) => {
    let li = document.createElement('li');
    let p = document.createElement('p');

    p.textContent = `${wiz.title} - ${wiz.author}`;
    li.style.listStyleType = 'none';
    li.appendChild(p);

    if (index === 0) {
      let image = document.createElement('img');
      image.src = 'https://media.s-bol.com/7ov383lj3Rr/800x1200.jpg';
      li.appendChild(image);
    }

    list.appendChild(li);
  });

  return list;
}