Mapear e Filtrar dados de uma API com ReactJS e Java Script!

#react #javascript #api #map

Ao final desse artigo seremos capazes de entender todo funcionamento, além de aplicar conhecimento relacionado:

1-Receber dados Objetos e Arrays em Json uma API.

2-Imprimir os resultados dos dados em uma lista ordenada.

3-Além disso criaremos um motor de busca com o filter,uma função do Java Script.Isso permitirá buscar determinadas informações da API/lista de dados.

Recentemente tive um desafio de pegar os dados de uma API,filtrar,criar uma busca e imprimir em uma página web,usando ReactJS.

O ReactJS é um Biblioteca Java Script para cliente Frontend.

Para isso teremos que usar funções nativas do java script.Funções que nos permitirão fazer,ordenação, manipulação de objetos em Arrays,objetos JSON,em diferentes formatações de objeto.

Referência da API em JSON que vamos usar:

note que ela tem um array com objetos aninhados em json

https://jsonplaceholder.typicode.com/users

Usaremos essa API para aplicar o tratamento, mapeamento e filtragem dos dados de resposta da API.

Os dados de resposta em json podem vir de diversas formas como objetos e arrays cada uma terá uma forma diferente de tratamento no React.

https://jsonplaceholder.typicode.com/

Função Map do Java Script:

O objeto Map é um mapa simples de chave/valor. Qualquer valor (objeto e valores primitivos) pode ser usado como uma chave ou um valor.

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map

Função Filter do Java Script:

O método filter() cria um novo array com todos os elementos que passaram no teste implementado pela função fornecida.

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/filtro

Projeto usando o map ew filter para ler e buscar os dados da API do nosso link/url.Projeto aberto no Codesandbox service:

https://codesandbox.io/s/react-map-list-api-data-2021-i7jbf?file=/src/App.js

Existem diversos tipos de objetos json que retornam das APIS:

O mais comum é um array composto de objetos, mais usado em casos específicos:

Existem outras formas de retorno de dados da api, isso depende da opção de quem desenvolveu a mesma.

A diferença entre esses vários objetos faz com que devamos usar uma forma de código para casa caso.Note que os objetos são diferentes,assim devemos indexar e tratar cada tipo de encapsulamento de objetos JSON como únicos.
Analisando e aplicando as funções e regras corretas,conseguiremos imprimir,buscar e manipular os dados do objeto.

Algumas funções JS que podem ser usados no ReactJS:

Object.values:
O método Object.keys() retorna um array de propriedades enumeraveis de um determinado objeto, na mesma ordem em que é fornecida por um laço for...in (a diferença é que um laço for-in enumera propriedades que estejam na cadeia de protótipos).

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/values

Object.keys:
O método Object.keys() retorna um array de propriedades enumeráveis de um determinado objeto, na mesma ordem em que é fornecida por um laço for...in (a diferença é que um laço for-in enumera propriedades que estejam na cadeia de protótipos).

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Conceitos e montagem do ciclo de vida no ReactJS.

Conhecimento em ReactJS , Class e Hooks:

Para trazer os dados corretamente na tela do usuário devemos
usar os conceitos de Component,Stateful/Stateless, Props,State,setState(),ComponentDidMount,ComponentWillReceiveProps,Arrow Functions,Funções de onClick,Funções Anônimas,Funções de Evento handleChange(e), { entre outras técnicas e funções.
Depois iremos renderizar os dados na tela.

É muito importante sabermos o id ou indexador do item que queremos buscar,assim será mais fácil escolher qual tipo de sintaxe usar,mas tudo estará em volta dos conceitos de:

Mapear

//import React, { useEffect, useState } from "react";
import React from "react";
import Filter from "./Filter.js";
import "./styles.css";

export default function App() {
  //const [id, setId] = React.useState([]);
  const [id, setId] = React.useState([]);

  React.useEffect(() => {
    // getAllUser();
    getUser();
  }, []);

  const getUser = async () => {
    const api_response = await fetch(
      "https://jsonplaceholder.typicode.com/users",
      {
        method: "GET",
        headers: {
          "Content-Type": "application/json"
        }
      }
    );
    const my_user = await api_response.json();
    console.log(my_user);
    setId(my_user);
  };
  return (
    <div className="App">
      <h1>MAP list array objeto JSON</h1>
      <h2>Wellcome User!</h2>
      <h1>Users</h1>
      <ul>
        {id.map((item) => (
          <li key="item.id">
            {item.id} - {item.username}
          </li>
        ))}
      </ul>
      <Filter />;
    </div>
  );
}

Filtrar

import React, { useEffect, useState } from "react";
//import React from "react";
import "./styles.css";

export default function Filter() {
  const [id, setId] = React.useState([]);

  //FILTER SEARCH DATA API
  const [data, setData] = useState([]);
  const [searchFilter, setSearchFilter] = useState([]);
  const [result, setResult] = useState("");

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((resp) => resp.json())
      .then((data) => setSearchFilter(data))
      .catch((error) => console.log({ error }));
  }, []);

  useEffect(() => {
    const results = searchFilter.filter((resp) =>
      resp.name.toLowerCase().includes(result)
    );
    setData(results);
  }, [result]);
  //console.log(data);

  const onChange = (evt) => {
    setResult(evt.target.value);
  };

  return (
    <div className="Filter">
      <h1>FILTER and list array object JSON</h1>
      <h2>Wellcome Search!</h2>

      <h1>Search</h1>

      <div className="Appfilter">
        <input
          type="text"
          placeholder="Search here ... "
          value={result}
          onChange={onChange}
        />
        {data.map((r, i) => (
          <ul key={i}>
            <li>{r.name}</li>
          </ul>
        ))}
      </div>
    </div>
  );
}