Fetch

HTML

<ul id="people"></ul>

JavaScript

const url = 'https://randomuser.me/api/?nat=us&results=10'

fetch(url)
  .then(response => response.json())
  .then(data => {
    let people = data.results
    let peopleInfo = people.map((person) => {
      return `
        <li>
          <img src='${person.picture.large}'> <br/>
          ${person.name.first} ${person.name.last} <br/>
          From ${person.location.state}
        </li><br/>
      `
    }).join('')
    document.getElementById('people').innerHTML = peopleInfo
  })
  .catch(error => {
    console.log('Fetch error: ', error)
  })

Demo

API from randomuser.me, a free API for generating random user data