I have data related to the inventory of the different types of items. I need to get the values in a table with the value of parent level repeating till all the child values have been rendered. the data is

const data = [
    {
        Category: "IT",
        Subcategory: [{
            Asset: "Computer",
            Specifications: [{ Display: ["LCD"]},
            { RAM: ["8GB", "12GB", "16GB"] },
            { Grapics_Type: ["Dedicated", "Integrated"] },
            { HardDisk: ["500GB", "1TB", "2TB"] },
            ]
        },
        {
            Asset: "Printer",
            Specifications: [{ Type: ["Color", "black&white"] },
            { Memory: ["128MB", "512MB", "1GB"] },
            { Printing_type : ["Dedicated", "Integrated"] },
            { HardDisk: ["500GB", "1TB", "2TB"] },
            ]
        },
        {
            Asset: "Tablet",
            Specifications: [{ Display: ["LCD"] },
            { RAM: ["8GB", "12GB", "16GB"] },
            { Grapics_Type: ["Dedicated", "Integrated"] },
            { HardDisk: ["500GB", "1TB", "2TB"] },
            ]
        },     
      
        ],
    },
    {
        Category: "NonIT",
        Subcategory: [{
            Asset: "Table",
            Specifications: [{ Color: ["Red", "Green", "Blue"] },
            { Weight: ["5", "7", "10"] },           
            ]
        },
        {
            Asset: "Chair",
            Specifications: [{ Spec1: ["val1","val2"] },
            { Spec2: ["val3", "val4", "val5"] },
            { Spec3: ["val6", "val7"] },
            ]
        },
        {
            Asset: "Fan",
            Specifications: [{ Spec4: ["val8"] },
            { Spec5: ["val8", "val9", "val10"] },
            { Spec6: ["val11", "val12"] },
            { Spec7: ["val13", "val14", "val15"] },
            ]
        },

        ],
    },
]

I need to get this data rendered in a table in the format as:

What should be the best way to do it. Do i need to modify the original array (and how to do it?) to contain all the values or directly render it to the table from the original array?

Thanks in advance.

CodePudding user response：

You need to have multiple iterations using array.map() step by step and get appropriate values and bind to table td's .

The level of iteration be like,

-> data

-> Subcategory

-> Specifications

To increase the Sl.No, you can have a global variable as let count = 0 and then assign the increased value like count = 1

Working Example:

const App = () => {
  const data = [
    {
      Category: "IT",
      Subcategory: [
        {
          Asset: "Computer",
          Specifications: [
            { Display: ["LCD"] },
            { RAM: ["8GB", "12GB", "16GB"] },
            { Grapics_Type: ["Dedicated", "Integrated"] },
            { HardDisk: ["500GB", "1TB", "2TB"] }
          ]
        },
        {
          Asset: "Printer",
          Specifications: [
            { Type: ["Color", "black&white"] },
            { Memory: ["128MB", "512MB", "1GB"] },
            { Printing_type: ["Dedicated", "Integrated"] },
            { HardDisk: ["500GB", "1TB", "2TB"] }
          ]
        },
        {
          Asset: "Tablet",
          Specifications: [
            { Display: ["LCD"] },
            { RAM: ["8GB", "12GB", "16GB"] },
            { Grapics_Type: ["Dedicated", "Integrated"] },
            { HardDisk: ["500GB", "1TB", "2TB"] }
          ]
        }
      ]
    },
    {
      Category: "NonIT",
      Subcategory: [
        {
          Asset: "Table",
          Specifications: [
            { Color: ["Red", "Green", "Blue"] },
            { Weight: ["5", "7", "10"] }
          ]
        },
        {
          Asset: "Chair",
          Specifications: [
            { Spec1: ["val1", "val2"] },
            { Spec2: ["val3", "val4", "val5"] },
            { Spec3: ["val6", "val7"] }
          ]
        },
        {
          Asset: "Fan",
          Specifications: [
            { Spec4: ["val8"] },
            { Spec5: ["val8", "val9", "val10"] },
            { Spec6: ["val11", "val12"] },
            { Spec7: ["val13", "val14", "val15"] }
          ]
        }
      ]
    }
  ];
  
  let count = 0;

  return (
    <div className="App">
      <table>
        <thead>
          <tr>
            <th> Sl.No </th>
            <th> Category </th>
            <th> Asset </th>
            <th> Specification </th>
            <th> Values </th>
          </tr>
        </thead>
        <tbody>
          {data.map(({ Category, Subcategory }, index) => {
            return Subcategory.map(({ Asset, Specifications }, j) => {
              return Specifications.map((spec, k) => {
                return (
                  <tr key={k}>
                    <td> {(count  = 1)} </td>
                    <td> {Category} </td>
                    <td> {Asset} </td>
                    <td> {Object.keys(spec)} </td>
                    <td> {spec[Object.keys(spec)].join(",")} </td>
                  </tr>
                );
              });
            });
          })}
        </tbody>
      </table>
    </div>
  );
}

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

table,
th,
td {
  border: 2px solid #000;
}

table {
  border-collapse: collapse;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>