Error in calling an API

Question

Error in calling an API

Asked 3 years, 7 months ago

Viewed 38 times

-2

I am studying pure javascript and api calls. My code is giving this error:

Uncaught (in promise) TypeError: users.forEach is not a function
  at renderUsers

async function getUsers() {
    let url = 'https://frontend-intern-challenge-api.iurykrieger.now.sh/products?page=1';
    try {
        let res = await fetch(url);
        return await res.json();
    } catch (error) {
        console.log(error);
    }
}

async function renderUsers() {
  let users = await getUsers();
  let html = '';
  users.forEach(user => {
      let htmlSegment = `<div class="user">
                          <img src="${user.image}" >
                          <h2>${user.name} ${user.description}</h2>
                          
                      </div>`;

      html += htmlSegment;
  });

  let container = document.querySelector('#mostrar');
  container.innerHTML = html;
}

renderUsers();

and html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="mostrar"></div>
    <script src="./api.js"></script>
</body>
</html>

2 answers

Browser other questions tagged javascript api

You are not signed in. Login or sign up in order to post.

by Bruno Vinicius • 9 points · Answer 1 · 2020-11-25T23:37:56+00:00

I believe I understand your question. The error you are getting is because you are trying to access the function forEach() that is not present in the object users, because it is not an array. The API you reported is returning a JSON object with product content and not users. But even so, you can access it using users.products (This yes is an array). Taking as an example:

async function getUsers() {
    let url = 'https://frontend-intern-challenge-api.iurykrieger.now.sh/products?page=1';
    try {
        let res = await fetch(url);
        return await res.json();
    } catch (error) {
        console.log(error);
    }
}

async function renderUsers() {
  let users = await getUsers();
  let html = '';
  users.products.forEach(product => { //Alterei o objeto acessado para users.products, ou seja, o array de produtos que é fornecido pela API.
  //Aqui você manipula cada item product do array products
      let htmlSegment = `
                        <div class="products"> //Alterei a classe pois vi que você não está utilizando folhas de estilo CSS ainda.
                          <img src="${product.image}" alt="Produto"/>
                          <h2>${product.name} ${product.description}</h2>

                        </div>`;
      html += htmlSegment;
  });

  let container = document.querySelector('#mostrar');
  container.innerHTML = html;
}

renderUsers();

by Giovane • **2,011** points · Answer 2 · 2020-11-25T23:10:40+00:00

Lucas, your question is very much played anyway, but I understand your problem.

1 - The error is saying that forEach is not a function of users, so that means the value that the variable users this receiving is not an array.

2 - You are using the wrong URL/API, in this API you are searching for products: https://frontend-intern-challenge-api.iurykrieger.now.sh/products?page=1

Which results in the following JSON:

3 - You would very easily notice this problem by investigating your browser devtools, analyzing the request made and seeing the result of it.
This can show laziness, which can generate many downvotes here at Stackoverflow.

I suggest knowing better the development tools available in the browser you use, I particularly recommend Google Chrome, and try to investigate more on your own instead of posting a question and waiting for an answer.