通过.map方法内的数组循环遍历

Question

我在JavaScript中非常垃圾，我想知道是否有人可以提供帮助。

我已经映射了一些API中的数据并将其显示到页面，我还想循环访问图像数组中的图像，以便为每张卡片分别显示不同的图像。

const images = ['https://placeimg.com/200/200/nature','https://placeimg.com/200/200/tech','https://placeimg.com/200/200/animals','https://placeimg.com/200/200/nature','https://placeimg.com/200/200/tech','https://placeimg.com/200/200/animals','https://placeimg.com/200/200/nature','https://placeimg.com/200/200/tech','https://placeimg.com/200/200/animals','https://placeimg.com/200/200/nature']; 
 

 

 
function getPeople() { 
 
    const endpoint = "https://swapi.co/api/people/"; 
 
    return fetch(endpoint) 
 
     .then(function(blob) { 
 
     return blob.json(); 
 
     }) 
 
     .then(function(data) { 
 
     return data.results; 
 
     }); 
 
} 
 

 
getPeople().then(peopleObject => { 
 
    displayPerson(peopleObject) 
 
}); 
 

 
function displayPerson(peopleObject) { 
 
    
 
     const people = peopleObject.map(person => { 
 
     return ` 
 
      <div class="card"> 
 
      <p> ${person.name} </p> 
 
      <p> ${person.height}cm </p> 
 
      <p> -- I WANT A IMAGE FROM IMAGE ARRAY HERE -- </p> 
 
      </div> 
 
     ` 
 
    }).join(''); 
 
    const cardContainer = document.createElement('div'); 
 
    cardContainer.className += "card-container"; 
 
    cardContainer.innerHTML = people; 
 
    document.body.appendChild(cardContainer); 
 
}

Answer 1

可以在Array#map函数它代表index使用第二个参数，只是指从images阵列指定的图像。

Codepen

const images = ['https://placeimg.com/200/200/nature','https://placeimg.com/200/200/tech','https://placeimg.com/200/200/animals','https://placeimg.com/200/200/nature','https://placeimg.com/200/200/tech','https://placeimg.com/200/200/animals','https://placeimg.com/200/200/nature','https://placeimg.com/200/200/tech','https://placeimg.com/200/200/animals','https://placeimg.com/200/200/nature']; 
 

 
function getPeople() { 
 
    const endpoint = "https://swapi.co/api/people/"; 
 
    return fetch(endpoint) 
 
     .then(function(blob) { 
 
     return blob.json(); 
 
     }) 
 
     .then(function(data) { 
 
     return data.results; 
 
     }); 
 
} 
 

 
getPeople().then(peopleObject => { 
 
    displayPerson(peopleObject) 
 
}); 
 

 
function displayPerson(peopleObject) { 
 
    
 
     const people = peopleObject.map((person, index) => { 
 
     return ` 
 
      <div class="card"> 
 
      <p> ${person.name} </p> 
 
      <p> ${person.height}cm </p> 
 
      <p><img src=${images[index]}</p> 
 
      </div> 
 
     ` 
 
    }).join(''); 
 
    const cardContainer = document.createElement('div'); 
 
    cardContainer.className += "card-container"; 
 
    cardContainer.innerHTML = people; 
 
    document.body.appendChild(cardContainer); 
 
}

Answer 2

const images = ['https://placeimg.com/200/200/nature','https://placeimg.com/200/200/tech','https://placeimg.com/200/200/animals','https://placeimg.com/200/200/nature','https://placeimg.com/200/200/tech','https://placeimg.com/200/200/animals','https://placeimg.com/200/200/nature','https://placeimg.com/200/200/tech','https://placeimg.com/200/200/animals','https://placeimg.com/200/200/nature']; 
 

 

 
function getPeople() { 
 
    const endpoint = "https://swapi.co/api/people/"; 
 
    return fetch(endpoint) 
 
     .then(function(blob) { 
 
     return blob.json(); 
 
     }) 
 
     .then(function(data) { 
 
     return data.results; 
 
     }); 
 
} 
 

 
getPeople().then(peopleObject => { 
 
    displayPerson(peopleObject) 
 
}); 
 

 
function displayPerson(peopleObject) { 
 
    
 
     const people = peopleObject.map((person, idx) => { 
 
     return ` 
 
      <div class="card"> 
 
      <p> ${person.name} </p> 
 
      <p> ${person.height}cm </p> 
 
      <p> <img src = "${images[idx % images.length]}"/></p> 
 
      </div> 
 
     ` 
 
    }).join(''); 
 
    const cardContainer = document.createElement('div'); 
 
    cardContainer.className += "card-container"; 
 
    cardContainer.innerHTML = people; 
 
    document.body.appendChild(cardContainer); 
 
}