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.

최근에는 ReactJS를 사용하여 API, 필터, 크리어, 버스 및 웹 페이지를 임프레미르하는 데 사용할 수 있습니다.

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, object JSON, em other formatações de object.

다음 API를 사용하여 JSON을 참조하십시오.

참고 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 e 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

존재하는 다양한 유형의 개체는 APIS에서 반환해야 합니다.

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


존재하는 형식은 api에 대한 retorno de api이며 isso는 mesma에 의존하는 opção de quem desenvolveu입니다.

A diferença entre esses vários objos 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.keys()는 배열 소유의 열거형을 반환하고 결정적인 개체, 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 원형).

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

개체.키:
방법 Object.keys() 배열에 대한 소유권 결정 열거형 반환, 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 원형).

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

Conceitos e montagem do ciclo de vida no ReactJS.

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:

메이페어

//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>
  );
}

필터

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>
  );
}

프로젝트 온라인

https://i7jbf.csb.app/

EM 구조

예:

예시 CodePen-CodeSandBox:

https://codepen.io/Guillerbr/pen/oNjgpod

https://codesandbox.io/s/filter-react-search-function-api-data-gxtqk

폰테스:

https://medium.com/@programadriano/javascript-entendendo-a-diferen%C3%A7a-entre-map-x-foreach-366a77fc7e82

https://medium.com/@programadriano/javascript-conhecendo-map-filter-e-reduce-ce072d8f0ec5

https://medium.com/@marcellguilherme/aprenda-tudo-sobre-reduce-ou-fold-fd71de86ce53

https://desenvolvimentoparaweb.com/javascript/map-filter-reduce-javascript/

https://www.w3schools.com/jsref/

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

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

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

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