Listagem de itens da API JSONPlaceholder

05/09/2024

Neste tópico iremos abordar brevemente a listagem de itens de uma API. Utilizaremos como exemplo uma fake API a JSONPlaceholder – Free Fake REST API, nela podemos abordar de maneira bem clara o listar.

Se você deseja apenas o código basta ir ao fim da página ou clicar aqui.

A JSONPlaceholder tem diversas rotas, mas a única que utilizaremos hoje é apenas a GET do /posts.

1 – Primeiro devemos fazer é criar um arquivo html, nele colocaremos o nome de index.html ou o nome que você preferir. E criaremos também o arquivo javascript nele podemos colocar o nome de index.js.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Listagem de itens</title>
</head>
<body>
  
</body>
</html>

2 – Agora vamos adicionar um elemento no body do html nele que será mostrado a listagem de itens e importamos nosso js no head, e no nosso arquivo .js vamos fazer um getElementById para pegar o elemento.

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

let list = document.getElementById("list");

3 – Agora no nosso arquivo Js vamos fazer uma fetch que basicamente é uma requisição para o endpoint da API e ela nos retornar os dados.

const list = document.getElementById("list");

async function fetchData(){
  await fetch("https://jsonplaceholder.typicode.com/posts")
    .then((res) => res.json())
    .then((data) => {
      console.log(data)
    });
}

fetchData();

4 – Iremos fazer uma função que ela terá como objetivo fazer o mapeamento dos itens e mostra-los na tela. Ela recebera os retorno da API como parâmetro. O resultado ficará igual ao lado.

const list = document.getElementById("list");

async function fetchData(){
  await fetch("https://jsonplaceholder.typicode.com/posts")
    .then((res) => res.json())
    .then((data) => {
      displayData(data);
    });
}

function displayData(items){
  items.map((item) => {
    list.innerHTML += `<h2>${item.title}</h2>`;
  })
}

fetchData();

Chegamos ao fim, lembrando que a diversas outras maneiras de fazer uma requisição, e essa foi apenas uma delas. Para praticar implemente mais coisas no seu código como o id e a descrição e adicione um CSS para melhor visibilidade, até a próxima!

Código completo abaixo

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

const list = document.getElementById("list");

async function fetchData(){
  await fetch("https://jsonplaceholder.typicode.com/posts")
    .then((res) => res.json())
    .then((data) => {
      displayData(data);
    });
}

function displayData(items){
  items.map((item) => {
    list.innerHTML += `<h2>${item.title}</h2>`;
  })
}

fetchData();