Сопоставление и фильтрация данных из API с помощью ReactJS и Java Script!

К концу этой статьи мы сможем понять все принципы функционирования, а также применить соответствующие знания:

1-Получение данных Объекты и массивы в Json через API.

2-Печатать результаты данных в виде упорядоченного списка.

3- Дополнительно мы создадим поисковую систему с фильтром, функцию Java Script. Это позволит получать определенную информацию из API/списка данных.

Недавно передо мной встала задача получить данные из API, отфильтровать их, создать поиск и вывести их на веб-страницу, используя ReactJS.

ReactJS — это библиотека Java Script для фронтенд-клиентов.

Для этого нам придется использовать нативные функции java script.Functions, которые позволят нам делать, сортировку, манипуляции с объектами в массивах, объектами JSON, в различных форматированиях объектов.

Ссылка на JSON API, который мы будем использовать:

  • обратите внимание, что в нем есть массив с вложенными объектами в формате json

https://jsonplaceholder.typicode.com/users

Мы будем использовать этот API для применения обработки, отображения и фильтрации данных ответа от API.

  • Данные json-ответа могут быть представлены в различных формах, таких как объекты и массивы, каждый из которых будет иметь свой способ обработки в React.

https://jsonplaceholder.typicode.com/

Функция Map в Java Script:

Объект Map представляет собой простую карту ключ/значение. Любое значение (объектные и примитивные значения) может быть использовано в качестве ключа или значения.

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

Функция фильтрации Java Script Filter:

Метод filter() создает новый массив со всеми элементами, которые прошли тест, реализованный предоставленной функцией.

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

Проект, использующий фильтр map ew для чтения и получения данных из нашего API ссылок/url.Проект открыт в сервисе Codesandbox:

Существует несколько типов json-объектов, которые возвращаются из APIS:

Наиболее распространенным является массив, состоящий из объектов, чаще всего используемый в конкретных случаях:

Существуют и другие способы возврата данных из api, это зависит от выбора того, кто его разработал.

Разница между этими различными объектами заставляет нас использовать свою форму кода для каждого случая.Обратите внимание, что объекты различны, поэтому мы должны индексировать и рассматривать каждый тип инкапсуляции объекта JSON как уникальный.
Анализируя и применяя правильные функции и правила, мы сможем печатать, получать и манипулировать данными объекта.

Некоторые JS-функции, которые можно использовать в ReactJS:

Object.values:
Метод Object.keys() возвращает массив перечисляемых свойств данного объекта в том же порядке, что и цикл for…in (разница в том, что цикл for-in перечисляет свойства, находящиеся в цепочке прототипов).

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

Object.keys:
Метод Object.keys() возвращает массив перечисляемых свойств данного объекта в том же порядке, что и цикл for…in (разница в том, что цикл for-in перечисляет свойства, находящиеся в строке прототипа).

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

Концепции и жизненный цикл сборки в ReactJS.

Знание ReactJS, классов и крючков:

Чтобы правильно отобразить данные на экране пользователя, мы должны
использовать концепции Component,Stateful/Stateless, Props, State, setState(), ComponentDidMount, ComponentWillReceiveProps, Arrow Functions, onClick Functions, Anonymous Functions, Event Functions handleChange(e), { среди других техник и функций.
Затем мы выведем данные на экран.

Очень важно знать id или индексатор элемента, который мы хотим найти, так будет легче выбрать, какой синтаксис использовать, но все будет вокруг понятий:

Карта

//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/

СТРОЯЩИЙСЯ

Примеры:

Примеры CodePen-CodeSandBox:

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

Источники:

https://medium.com/@programadriano/javascript-understanding-the-difference%C3%A7a-between-map-x-foreach-366a77fc7e82

https://medium.com/@programadriano/javascript-understanding-map-filter-and-reduce-ce072d8f0ec5

https://medium.com/@marcellguilherme/learn-all-about-reduce-or-fold-fd71de86ce53

https://dev.to/iam_timsmith/lets-build-a-search-bar-in-react-120j

map(), filter() e reduce() em 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

Оцените статью
devanswers.ru
Добавить комментарий