Display data on the table - React.js

Question

This is a simple question. How to display the data in the table from json file?

table.js

   componentDidMount() {
    
        fetch('/apps.json')
       .then(rsp => rsp.json())
        .then(data => data.map(item => {
            return console.log(item);
        }));
    }

      <tbody> 
     {/* { data.map(item => {
      return(
         <tr>
        <td>{item.id}</td>
        <td>{item.name}</td>
        <td>{item.dateCreated}</td>
       </tr>
      );
      })} */}
     </tbody>
   

Answer 1

// Set appsData state
componentDidMount() {
  fetch("/apps.json")
  .then((rsp) => rsp.json())
  .then((rsp) => {
    this.setState({
      appsData: rsp
    });
  });

// Map the data
{ this.state.appsData.map(item => {
  return(
      <tr key={item.id}>
         <td>{item.id}</td>
         <td>{item.name}</td>
         <td>{item.url}</td>
         <td>{item.devOpsUrl}</td>
         <td>{item.techStack}</td>
         <td>{item.dateCreated}</td>
     </tr>
  );
})}

If you're interested in hooks, you can use the useState and useEffect hooks.

import React, { useState, useEffect } from "react";

const Apps = () => {
  const [data, setData] = useState([])

  useEffect(() => {
    fetch("/apps.json")
      .then((rsp) => rsp.json())
      .then((data) => setData(data))
  }, [])

  return (
  <div>
    <h4>Apps List</h4>
      <table border={1} cellPadding={5}>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>URL</th>
            <th>DevOps URL</th>
            <th>Tech Stack</th>
            <th>Date Created</th>
          </tr>
        </thead>
        <tbody>
          { data.map(item => (
            <tr key={item.id}>
              <td>{item.id}</td>
              <td>{item.name}</td>
              <td>{item.url}</td>
              <td>{item.devOpsUrl}</td>
              <td>{item.techStack}</td>
              <td>{item.dateCreated}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default Apps

References:
Using the State Hook
Using the Effect Hook

Answer 2

You can work with react-data.table-component its very simple to use this is a simple:

    import React from 'react';
    import DataTable from 'react-data-table-component';
    
    
  
    const data= [{"id":1,"name":"Alphazap","url":"http://1und1.de","devOpsUrl":"https://webs.com/nunc/commodo/placerat/praesent/blandit/nam/nulla.jsp","techStack":"sit amet cursus id turpis integer aliquet massa id lobortis convallis tortor risus dapibus","dateCreated":"05.06.2020"}]

      const columns = [
      // your columns here 
      ];
    
      return (
        <>

          <DataTable
            title="my table"
            columns={columns}
            data={data}
          />
        </>
      );
    };

Check here for more infos and here for more simples

Answer 3

After you have converted the response received from the server into JSON, you can then set the JSON formatted response in your state variable using the setState() method.

componentDidMount() {
    fetch("/apps.json")
    .then((rsp) => rsp.json())
    .then((rsp) => {
      this.setState({
        appsData: rsp
      });
    });
}

In your JSX code, you can uncomment the code you have written with a small change that you need to add a unique key prop to each item in your list. This helps React identify which elements have really changed so as to render them again.

{ data.map(item => {
    return(
        <tr key={item.id}>
           <td>{item.id}</td>
           <td>{item.name}</td>
           <td>{item.url}</td>
           <td>{item.devOpsUrl}</td>
           <td>{item.techStack}</td>
           <td>{item.dateCreated}</td>
       </tr>
    );
})}

Read more:

React Documentation: setState()

React Documentation: Lists and Keys