How to render data from a API response in a table using react js

Question

I am trying to get a API response data in a table. The data I am getting from API is dynamic that is it will always change when ever I will run the API so the key and the values will change I am getting a data exactly in this format bellow In actual API response I have array of almost 1900 Boolean values but here I am just showing a example of data I am getting as a response

{D1:[true,true,false],D2:[false,true,true],D3:[true,false]}

Here I want D1,D2,D3 as column head and the values as rows, here is the example how I want this data to look like

D1.	D2.	D3.
true	false	true
true	true	false
false	true

The data from header to rows will change after every run. I have just fetch the API and set a response in a state, I just can't figure out how to use that data in table. Thank you in advance.

{
    const [Data, setData]=useState("")  


    let RunScript = async(e) =>{
        e.preventDefault();
        fetch('http://localhost:5000/getresult',{
        method: "POST",
        crossDomain: true,
        header: {
        "Content-Type":"application/json",
        },
        body:JSON.stringify({
        UserInput
        }),
        }).then((response)=>response.json())
        .then(data=>{
        console.log(data)
        setData(data);
        })
        }
}

Scario Eva · Accepted Answer · 2022-09-13 17:24:32Z

1

Not done any styling, just functionality.

  <table border={1}>
    <thead>
      <tr>
        {Object.keys(Data).map((item) => {
          return <th key={item}>{item}.</th>;
        })}
      </tr>
    </thead>
    <tbody>
      {[
        ...Array(
          Math.max(...Object.values(Data).map((item) => item.length))
        ),
      ].map((itm, idx) => {
        return (
          <tr>
            {Object.values(Data).map((item) => {
              return (
                <td>
                  {typeof item[idx] === "boolean"
                    ? new Boolean(item[idx]).toString()
                    : ""}
                </td>
              );
            })}
          </tr>
        );
      })}
    </tbody>
  </table>

answered Sep 13, 2022 at 17:24

Scario Eva

2572 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nikita.S Over a year ago

Hi thanks for your answer it is working I can render headers but coming to the values I almost have 1988 boolean values in my data and somehow I am getting a error as "Invalid Array Length" can you please let me know how I can resolve that

Scario Eva Over a year ago

does one or some of the object values are not in Array? Please check json data

Nikita.S Over a year ago

They are all in Array it's {D1: Array(1900), D2:Array(1900)} and all 1900 are boolean values as I have shown in a question as a example

Scario Eva Over a year ago

try this {Data && (<table>.....</table>)}

Mursleen Amjad · Accepted Answer · 2022-09-13 18:07:07Z

1

You can do something like this

import "./styles.css";

export default function App() {
  const Data = {
    D1: [true, true, false],
    D2: [false, true, true],
    D3: [true, false],
  };
  const maxRowLenght = Math.max(
    ...Object.values(Data).map((item) => item.length)
  );
  return (
    <table>
      <thead>
        <tr>
          {Object.keys(Data).map((item) => {
            return <th key={item}>{item}.</th>;
          })}
        </tr>
      </thead>
      <tbody>
        {[...Array(maxRowLenght)].map((element, index) => {
          return (
            <tr>
              {Object.values(Data).map((item) => {
                return (
                  <td>
                    {typeof item[index] === "boolean"
                      ? item[index].toString()
                      : ""}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

answered Sep 13, 2022 at 18:07

Mursleen Amjad

1593 bronze badges

1 Comment

Nikita.S Over a year ago

Thank you for your help it is working for a small data but in my Code the response I am receiving from a API has almost array of 1900 Boolean values and I can't render all of them at once I am getting a "Invalid Array Length" error as well as "unique "key" prop" error

Collectives™ on Stack Overflow

How to render data from a API response in a table using react js

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related