React make table с JSON - PullRequest
Новая
       19

React make table с JSON

1 голос
/ 05 августа 2020

У меня есть конечная точка API, которая возвращает мне такие данные Google Sheets: 

[{'App Id': '1', 'Name': 'Test', 'Homepage': 'example.com'}, {'App Id': '2', 'Name': 'Another', 'Homepage': 'example.org'}]

Я получаю данные выше с помощью axios, используя следующий код. 

axios.get('http://127.0.0.1/')
  .then((response) => {
    console.log(response.data);
  });

И я хочу создать таблицу с этими данными в React. Таблица должна выглядеть так: 

| App Id | Name    | Homepage    |
|--------|---------|-------------|
| 1      | Test    | example.com |
| 2      | Another | example.org |

Как я могу сделать эти данные похожими на таблицу выше?

Ответы [ 2 ]

1 голос
/ 05 августа 2020

Итак, как уже говорилось, вам нужно построить таблицу с данными, которые вы получаете из остальных API

, здесь вы можете иметь столбцы как stati c

App. js

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

export default function App() {
  const [data, setData] = useState([]);

  const columns = [
    { property: "id", header: "Id" },
    { property: "title", header: "Title" }
  ];

  useEffect(() => {
    const loadData = async () => {
      const response = await axios(
        "https://jsonplaceholder.typicode.com/todos/"
      );
      setData(response.data);
    };
    loadData();
  }, []);

  return (
    <Fragment>
      <table>
        <tr>
          {columns.map(col => (
            <th>{col.header}</th>
          ))}
        </tr>
        {data.map(datumn => {
          return (
            <tr>
              {columns.map(col => {
                return <td>{datumn[col.property]}</td>;
              })}
            </tr>
          );
        })}
      </table>
    </Fragment>
  );
}

стилей. css

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

Пример коды и ящик

вы можно импровизировать, добавив ошибку и состояние загрузки.

0 голосов
/ 05 августа 2020

Может быть несколько способов реализовать то, что вам нужно.

Это может быть реализовано с использованием простого html и bootstrap дизайна по вашему усмотрению.

необходимо установить данные в вашем состоянии и сопоставить их при рендеринге.

Ссылка

Ссылка выше приведет вас к документации bootstrap, где вы можете найдите фрагменты кода, относящиеся к таблице.

...