0
92
ViewsAsigne los datos de acuerdo con la imagen en reaccionar js
Estoy tratando de colocar los datos de la API en una tabla como en la imagen, pero recibo un error.
Quiero que el nombre del módulo principal de datos en función de la fecha debe aparecer como encabezados de tabla, y los submódulos correspondientes aparecerán debajo del módulo principal como en la imagen.
Nota : el módulo principal tendrá más de un submódulo como en la imagen.
El último encabezado de la tabla será personalizado. Tendrá todos los nombres de módulos personalizados mostrados por fecha.
<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>He creado un entorno limitado de código del código completo que probé.
https://codesandbox.io/s/blissful-http-fdl0f?file=/src/App.js
3 answers
Answer question0
Puedes intentar usar un filter como este. No estoy seguro si eso es lo que estás buscando.
{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> ) })}0
¿Es esto lo que quieres? ¿Puede elaborar más sobre su problema con un ejemplo para entender mejor?
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> );0
Aquí está el código de muestra que estás buscando, supongo.
URL de demostración de codesandbox:https://codesandbox.io/s/confident-night-lrjuf?file=/src/App.js
la salida se ve así
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> ); }