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

Question

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.

programoholic · Accepted Answer · 2022-09-05 16:39:04Z

2

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

edited Sep 5, 2022 at 16:39

answered Sep 5, 2022 at 16:33

programoholic

5,2545 gold badges26 silver badges63 bronze badges

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

2 Comments

A G Over a year ago

This creates duplicate rows in case there are multiple entries for Name_Sides.

programoholic Over a year ago

Well It can be handled before passing the value to the bottom :)

A G · Accepted Answer · 2022-09-05 17:00:24Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related