Fill Json table with checkbox in react and check them according to JSON data

user_11360631 0
Viewed 46

I am creating a table in React from a JSON like this:

[
    {
        "Id_side": 123,
        "Name_side": "R4",
        "Name_cycle": "C1"
    },
    {
        "Id_side": 345,
        "Name_side": "M1",
        "Name_cycle": "C2"
    },
    {
        "Id_side": 567,
        "Name_side": "V5",
        "Name_cycle": "C3"
    },
    {
        "Id_side": 45,
        "Name_side": "U4",
        "Name_cycle": "C4"
    }
]

The table, I am rendering it like this:

import tableData from "./actions/tableData.json"

const BrandTable = () => {
  
  let tb_headers = tableData.map((item)=>{
    return(
      <td key={item.Id_side}>{item.Name_cycle}</td>
    )
  })
  //  this function is only for testing, I know it does not achieve anything. 
  function renderChecks() {
    console.log("checkbox")
    for (var i = 0; i < tableData.length; i++){
      return <td><input type="checkbox" value="Test" /></td>
  } }

  let tb_data = tableData.map((item)=>{
    return(
      <tr key={item.Id_side}>
        <td>{item.Name_side}</td>
        {renderChecks()}
      </tr>
    )
  })

  return(
    <table id="table">
      <thead>
      <tr>
        <td></td>
        {tb_headers}
        </tr>
      </thead>
      <tbody>
        {tb_data}
      </tbody>
    </table>
    
  )
 
};

export default BrandTable;

For now I am only able to get a table like this: Table1

but what I'm looking to do is to make a table with checkboxes in all the cells and have them checked as they come in the JSON. For example, according to the JSON I show above the table should look like this: table2

I need that each header has checkboxes in each of the cycles that exist and that these are activated or not depending on whether they come together in the json.

reactjs checkbox json javascript
2 Answers

You can do it like below :

const cells = ['C1', 'C2', 'C3', 'C4'];

export default function App() {
  return (
    <div>
      <table border="1" style={{ width: '100%' }}>
        <thead>
          <th></th>
          <th> C1</th>
          <th> C2</th>
          <th> C3</th>
          <th> C4</th>
        </thead>
        <tbody>
          {data.map((item) => {
            return <TableRow data={item} key={item.id} />;
          })}
        </tbody>
      </table>
    </div>
  );
}

const TableRow = ({ data }) => {
  return (
    <tr>
      <td> {data.Name_side} </td>{' '}
      {cells.map((cell) => {
        return (
          <td key={cell}>
            <input
              type="checkbox"
              checked={data.Name_cycle === cell}
              // add event listener
            />
          </td>
        );
      })}
    </tr>
  );
};

Example : Working demo

user_81754670

First step would be to create a basic map of Name_side & Name_cycles

var map = data.reduce((a,b) => {
    a[b.Name_side] = a[b.Name_side] || [];
    a[b.Name_side].push(b.Name_cycle);
    return a;
}, {});

This would give an output like

[object Object] {
  M1: ["C2"],
  R4: ["C1"],
  U4: ["C4", "C2"],
  V5: ["C3", "C1", "C2"]
}

Now we have unique Name_side mapped to the Name_cycle values. We can now iterate on the object keys & create the rows.

<tbody>
  {Object.keys(map).map((row) => (
    <tr>
      <td>{row}</td>
      {cycleNames.map((cell) => {
      const checked = map[row].includes(cell);
      return (
        <td>
        <input checked={checked} type="checkbox" value="Bike" />{" "}
          {cell}
        </td>
      );
    })}
   </tr>
 ))}
</tbody>

Edit JSON Table

json table

user_2134690
Related