TypeError: data.forEach не является функцией в javascript для получения данных формы API

Question

document.querySelector("#userForm").addEventListener('click', getProfile);
function getProfile(event) {
    event.preventDefault();
    var username = document.querySelector('#searchUser').value;
    fetch(`https://api.github.com/users/${username}`).then(function (res) {
      return res.json();
    }).then(function (data) {
let output = '';
data.forEach(function (user) {
        output +=`
        <div class="card card-body mb-3">
        <div class="row">
          <div class="col-md-3">
            <img class="img-fluid mb-2" src="${user.avatar_url}">
            <a href="${user.html_url}" target="_blank" class="btn btn-primary btn-block mb-4">View Profile</a>
          </div>
          <div class="col-md-9">
            <span class="badge badge-primary">Public Repositories: ${user.public_repos}</span>
            <span class="badge badge-secondary">Public Gists: ${user.public_gists}</span>
            <span class="badge badge-success">Followers: ${user.followers}</span>
            <span class="badge badge-info">Following: ${user.following}</span>
            <br><br>
            <ul class="list-group">
              <li class="list-group-item"><strong>Company:</strong> ${user.company}</li>
              <li class="list-group-item"><strong>Website/Blog:</strong> <a href="${user.blog}" target="_blank">${user.blog}</a></li>
            </ul>
          </div>
        </div>
      </div>`;
      });
      document.querySelector('#output').innerHTML = output;
    }).catch(function (err) {
      document.querySelector('#output').innerHTML = err;
    });
  }

TypeError: data.forEach не является функцией в javascript для извлечения данных формы api

, попробуйте

Object.keys(data).forEach(function (key)
{
....
});

Answer 1

API, который вы используете, просто возвращает объект, а не массив. Этот ответ от вашего API должен выглядеть следующим образом.

{
  "login": "narayansharma91",
  "id": 13073421,
  "node_id": "MDQ6VXNlcjEzMDczNDIx",
  "avatar_url": "https://avatars0.githubusercontent.com/u/13073421?v=4",
  "gravatar_id": "",
}

Просто используйте без foreach, как показано ниже.

 fetch(`https://api.github.com/users/${username}`).then(function (res) {
    return res.json();
 }).then(function (user) {
  let output =`
    <div class="card card-body mb-3">
    <div class="row">
      <div class="col-md-3">
        <img class="img-fluid mb-2" src="${user.avatar_url}">
        <a href="${user.html_url}" target="_blank" class="btn btn-primary btn-block mb-4">View Profile</a>
      </div>
      <div class="col-md-9">
        <span class="badge badge-primary">Public Repositories: ${user.public_repos}</span>
        <span class="badge badge-secondary">Public Gists: ${user.public_gists}</span>
        <span class="badge badge-success">Followers: ${user.followers}</span>
        <span class="badge badge-info">Following: ${user.following}</span>
        <br><br>
        <ul class="list-group">
          <li class="list-group-item"><strong>Company:</strong> ${user.company}</li>
          <li class="list-group-item"><strong>Website/Blog:</strong> <a href="${user.blog}" target="_blank">${user.blog}</a></li>
        </ul>
      </div>
    </div>
  </div>`;
  document.querySelector('#output').innerHTML = output;
}).catch(function (err) {
  document.querySelector('#output').innerHTML = err;
});