Map the data according to image in react js

user_17513486 0
Viewed 317

I am trying to loop the API data into a table as in the image, but I am getting an error.

I want date-wise data main module name must come as table headers, and corresponding sub-modules will come under the main module as in the image.

Note: the main module will have more than one sub-module as in the image.

The last table header will be custom. It will have all the custom module names displayed date-wise.

<div style={{ display: "flex" }}>
      {predefined.map((personData, index) => {          ///mapping mainmodules
        return (
          <thead>
            <tr>
              <th style={styles.th}>{personData.mainModule}</th>
            </tr>
            {personData.submodule
              .filter((e) => e.completed == true)            ///maping submodules
              .map((subModule) => {
                return (
                  <>
                    <tr>
                      <td style={styles.td}>{subModule.subModuleName}</td>
                    </tr>
                  </>
                );
              })}
          </thead>
        );
      })}

      <thead>
        <tr>
          <th style={styles.th}>custum</th>
        </tr>

        {custom.map((personData, index) => {
          return (
            <tr>
              <td style={styles.td}>{personData.name}</td>{" "}
            </tr>
          );
        })}
      </thead>

I have created a code sandbox of complete code I tried.

https://codesandbox.io/s/blissful-http-fdl0f?file=/src/App.js

enter image description here

reactjs javascript
3 Answers

You can try to use filter like this. Not sure if that's what you're looking for.

{predefined.filter(item => item.module === 'mainmodule1').map((module, index) => {
    return (
        <td key={index}></td>
    )
})}

{predefined.filter(item => item.module === 'mainmodule2').map((module, index) => {
    return (
        <td key={index}></td>
    )
})}
user_80668500

Is this what you want? Can you elaborate more on your problem with an example to understand better.

useEffect(() => {
    const config = {
      headers: {
        Authorization: `token 52ae6ea1759163fcdab109ca0f883afb7b2df857`
      }
    };

    axios
      .get(
        "/all-activity-data/?customer=20",
        config
      )
      .then((res) => {
        console.log(res.data);
        let filteredData = {};
        let filteredData2 = {date: ''};

        res.data.Predefined.forEach((e) => {
          if (e.completed === true){
            filteredData[e.date] = filteredData[e.date] ? [...filteredData[e.date], e] : [e]
            filteredData2[e.mainModule] = ""
          };
        });
        setheaders(filteredData2);
        console.log(filteredData)
        setcustom(filteredData);
        setpredefined(res.data.Predefined);
      });
  }, []);

...

return (
    <div style={{ display: "flex" }}>
      <table>
          <thead>
            <tr>
      {Object.keys(headers).map((personData, index) => {
        return (
              <th style={styles.th}>{personData}</th>
              );
            })}
            </tr>
          </thead>
{/* <tbody> */}
      {Object.keys(custom).map((personData, index) => {
        return (
            <tr>
              <td>{personData}</td>
              {custom[personData].map(el => <td>{el.submodule}</td>)}
            </tr>
            
        );
      })}
{/* </tbody> */}

      <thead>
        <tr>
          <th style={styles.th}>custum</th>
        </tr>

        {/* {custom.map((personData, index) => {
          return (
            <tr>
              <td style={styles.td}>{personData.name}</td>{" "}
            </tr>
          );
        })} */}
      </thead>
      </table>
    </div>
  );
user_81700920

here is the sample code that you’re looking for I guess.

demo codesandbox url: https://codesandbox.io/s/confident-night-lrjuf?file=/src/App.js

output looks like this

enter image description here

App.js

import React, { useState, useEffect } from "react";
import axios from "axios";
import moment from "moment";
import "./styles.css";

export default function ActivityTracker(props) {
  const [predefined, setpredefined] = useState([]);
  const [custom, setcustom] = useState([]);
  var pikerdate = moment().format("YYYY-MM-DD");
  useEffect(() => {
    const config = {
      ...// your config
    };

    axios
      .get(
        "customer/get-all-activity-data/?customer=20",
        config
      )
      .then((res) => {
        let filteredData = [];
        let filteredData2 = [];

        res.data.Custom.forEach((e) => {
          if (e.completed === true) filteredData.push(e);
        });
        filteredData.sort(
          (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
        );
        setcustom(filteredData);
        setpredefined(res.data.Predefined);
      });
  }, []);
  console.log(custom);
  return (
    <div style={{ display: "flex" }}>
      <thead>
        <tr>
          <th style={styles.th}>Date</th>
        </tr>

        {predefined.map((personData, index) => {
          return (
            <tr>
              <td style={styles.td}>{personData.date}</td>
            </tr>
          );
        })}
      </thead>
      {predefined.map((personData, index) => {
        return (
          <thead>
            <tr>
              <th style={styles.th}>{personData.mainModule}</th>
            </tr>
            {predefined
              .filter(
                (e) => e.completed && e.mainModule === personData.mainModule
              )
              .map((subModule, index) => {
                return (
                  <tr key={index}>
                    <td style={styles.td}>{subModule.mainModule}</td>
                  </tr>
                );
              })}
          </thead>
        );
      })}

      <thead>
        <tr>
          <th style={styles.th}>custum</th>
        </tr>

        {custom.map((personData, index) => {
          return (
            <tr>
              <td style={styles.td}>{personData.activity}</td>{" "}
            </tr>
          );
        })}
      </thead>
    </div>
  );
}
user_77843540
Related