通過.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); 
 
}