使用 vanilla js 遍历数组并渲染到 DOM

Question

我正在尝试遍历另一个数组中的一个数组并将其渲染到 DOM，但我对第二个数组没有定义。下面是我得到未定义的第二个数组：

<p><strong>Website:</strong> <a href="https://${url}" target="_blank" rel="noopener noreferrer">${url}</a></p>
        <p><strong>Social:</strong> ${social.forEach(({ link, name }, idx, social) => {
       `<a key={name} href={link} target="_blank" rel="noopener noreferrer">
          ${social.length + 1 !== idx && idx !== 0 ? `, ${name}` : name}
        </a>`
})}
</p>

这里是完整的例子full code with both arrays

Answer 1

Sara 用 map 击败了我，我已经包含了 forEach 和 map 的示例。 只需将社交链接循环从template literal 中删除即可。

//DOM Elements
const getCardsElm = document.getElementById("cards");

const data = {
    "img": "https://placehold.it/400",
    "brand": "Some brand",
    "url": "somelink.com",
    "service": "Google Analytics, Facebook Pixel",
    "social": [
      {
        "link": "https://facebook.com",
        "name": "Facebook"
      },
      {
        "link": "https://instagram.com",
        "name": "Instagram"
      }
    ]
  }

let filledArray = [...new Array(10)].map(()=> data);

const setupCards = (array) => {
  let html = '';
  array.forEach(({ img, url, brand, service, social }) => {
    let socialLinks = ''; 
    social.map(({ link, name }, idx, social) => {
      socialLinks += `<a key=${name} href=${link} target="_blank" rel="noopener noreferrer">
               ${social.length + 1 !== idx && idx !== 0 ? `, ${name}` : name}
             </a>`
    })
    
    // For Each
    // social.forEach(({ link, name }, idx, social) => {
    //   socialLinks += `<a key=${name} href=${link} target="_blank" rel="noopener noreferrer">
    //            ${social.length + 1 !== idx && idx !== 0 ? `, ${name}` : name}
    //          </a>`
    // })
    
    const card = `
      <div class="card">
       <div class="card-inner">
          <div class="card-front">
            <img src=${img} alt="logo">
          </div>
          <div class="card-back">
            <h3>${brand}</h3>
            <p><strong>Website:</strong> <a href="https://${url}" target="_blank" rel="noopener noreferrer">${url}</a></p>
            <p><strong>Social:</strong> ${socialLinks}</p>
            <p><strong>Services:</strong> ${service}</p>
          </div>
        </div>
      </div>
    `;

    html += card
  })
  getCardsElm.innerHTML = html;
}

setupCards(filledArray);

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.card {
  cursor: pointer;
  background-color: transparent;
  height: 300px;
  width: 300px;
  margin: 10px;
  perspective: 1000px;
}

.card h1 {
  font-size: 25px;
  border-bottom: 1px #fff solid;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card-back {
  background-color: #333;
  color: white;
  padding: 20px;
  transform: rotateY(180deg);
}

.card li {
  list-style: none;
  padding-bottom: 10px;
}

<h3>working example with reactjs <a href="https://tech-solutions.vercel.app/#portfolio">link</a></h3>

<div class="cards" id="cards"></div>

Answer 2

您的代码正在运行。我使用了map 而不是forEach

//DOM Elements
const getCardsElm = document.getElementById("cards");

const data = {
    "img": "https://source.unsplash.com/random/800x600",
    "brand": "Some brand",
    "url": "somelink.com",
    "service": "Google Analytics, Facebook Pixel",
    "social": [
      {
        "link": "https://facebook.com",
        "name": "Facebook"
      },
      {
        "link": "https://instagram.com",
        "name": "Instagram"
      }
    ]
  }

let filledArray = [...new Array(10)].map(()=> data);

const setupCards = (array) => {
  let html = '';
  array.forEach(({ img, url, brand, service, social }) => {
    const card = `
      <div class="card">
       <div class="card-inner">
          <div class="card-front">
            <img src=${img} alt="logo">
          </div>
          <div class="card-back">
            <h3>${brand}</h3>
            <p><strong>Website:</strong> <a href="https://${url}" target="_blank" rel="noopener noreferrer">${url}</a></p>
            <p><strong>Social:</strong> 
${social.map(({ link, name }, idx, social) => {
  return `<a key=${name} href=${link} target="_blank" rel="noopener noreferrer">
              ${social.length + 1 !== idx && idx !== 0 ? `, ${name}` : name}
            </a>`;
    })}
</p>
            <p><strong>Services:</strong> ${service}</p>
          </div>
        </div>
      </div>
    `;

    html += card
  })
  getCardsElm.innerHTML = html;
}

setupCards(filledArray);

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.card {
  cursor: pointer;
  background-color: transparent;
  height: 300px;
  width: 300px;
  margin: 10px;
  perspective: 1000px;
}

.card h1 {
  font-size: 25px;
  border-bottom: 1px #fff solid;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card-back {
  background-color: #333;
  color: white;
  padding: 20px;
  transform: rotateY(180deg);
}

.card li {
  list-style: none;
  padding-bottom: 10px;
}

<div class="cards" id="cards"></div>