loop through an array inside a .map method

Question

I'm pretty rubbish at JavaScript i was wondering if anyone could help.

I've mapped through some data from an API and displaying it to the page and i would like to also loop through the images in the images array so i have a different image for each card.

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);
}

Please don't post links to 3rd party sites for your code. Those links can become broken over time. Just post your code right here in a snippet. — Scott Marcus
– Scott Marcus, Commented Jul 24, 2017 at 19:59

kind user · Accepted Answer · 2017-07-24 20:01:27Z

2

You can use second argument in the Array#map function which stands for index and just refer to the specified image from the images array.

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);
}

answered Jul 24, 2017 at 20:01

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oliver Sewell Over a year ago

Thank you for explanation :-)

juvian · Accepted Answer · 2017-07-24 20:03:04Z

1

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);
}

answered Jul 24, 2017 at 20:03

juvian

16.1k2 gold badges42 silver badges40 bronze badges

1 Comment

Oliver Sewell Over a year ago

Thanks juvian i didn't know i could do this

Collectives™ on Stack Overflow

loop through an array inside a .map method

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related