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

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

CodePudding user response：

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>

CodePudding user response：

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