Buen dia, estoy tratando de obtener la propiedad del name
de dos arrays de datos que estan dentro de otro array.
Creé una constante para recorrer dos arreglos en una tabla, tengo dos listas que contienen una los datos de los clientes y otra los proveedores, cada lista tiene un atributo numero de serie
y un name
, las puse en un array object para poder determinar con un select a cual de las dos se desea listar.
const cdrTypeRequest = [
{
"api": customerList
},
{
"api": providerList
}
]
Estoy tratando de recorrer estas listas y comparar con el metodo .find() de Javascript para obtener el nombre del customer
o provider
, ya que en el campo de la base de datos se encuentra almacenado es el numero de serie(id) del customer o provider, asi que la idea es en lugar de mostrar un numero es mostrar el nombre de ese cliente o proveedor.
He intentado hacerlo de varias formas pero no me reconoce los atributos como si no estuviera recorriendo las listas: <td>{cdrTypeRequest.api.map.find(data =>{return data.map.serie === report.map.contactId}).map.name}</td>
Aqui dejo el codigo de este componente de la tabla:
import React, { useContext, useState } from 'react'
import { useEffect } from 'react';
import { Button, Modal } from 'react-bootstrap';
import Table from 'react-bootstrap/Table';
import { CdrsContext } from '../../contexts/CDRDownloadingContext';
import { CustomerContext } from '../../contexts/CustomerContext';
import { ProviderContext } from '../../contexts/ProviderContext';
import { UserContext } from '../../contexts/UserContext';
import UseAuth from '../../hooks/UseAuth';
import styles from '../stylePages/CDRDownloading.module.css'
const CDRTable = () => {
/**
* Logic to handle delete functionality.
*/
const [show, setShow] = useState(false); // variable to open modals
const handleClose = () => setShow(false);
const [selectedId, setSelectedId] = useState();
const handleClickDelete = (reportId) => {
// if (cdrListFiltered.status === 0 || cdrListFiltered.status === 2) {
// setShow(true)
// setSelectedId(reportId)
// console.log(reportId)
// } else {
// alert("Lo sentimos este reporte ya no puede ser eliminado")
// }
setShow(true)
setSelectedId(reportId)
console.log(reportId)
}
const { customerList, getCustomerList } = useContext(CustomerContext)
const { providerList, getProviderList } = useContext(ProviderContext)
const { getUserDetails, record } = useContext(UserContext)
const { cdrListFiltered, getCdrsListMadeByUser, deleteCdr } = useContext(CdrsContext);
const { auth } = UseAuth();
/*************************************
* GETTING THE USER ID TO GET THE LIST OF REPORT REQUESTS SENT BY THE SPECIFIC USER
//*************************************/
// Auth.username is providing an object type user from the backend, which among the properties it contains the user id.
const extractedUsername = auth.username;
// Once the user details have been loaded with the getUserDetails(extractedUsername); function which expects a username to get data.
// I get the especific user and with the record
const extractedUserById = record.serie;
//**************************************/
/**
* Function to mount the list of report requests made by the logged in user
*/
useEffect(() => {
getUserDetails(extractedUsername);
if (extractedUserById !== undefined) {
getCdrsListMadeByUser(extractedUserById)
}
}, [extractedUserById]);
const typeReport = {
0: 'Cliente',
1: 'Proveedor'
}
const callFilter = {
0: 'Contestadas',
1: 'No contestadas',
2: 'Todas'
}
const statusStage = {
0: 'Recibido',
1: 'En proceso',
2: 'Finalizado'
}
const cdrTypeRequest = [
{
"api": customerList
},
{
"api": providerList
}
]
useEffect(() => {
getCustomerList();
getProviderList();
}, [])
return (
<>
<div>
<br />
</div>
<Table className={styles.table}>
<thead className={styles.tableHead}>
<tr>
<th>ID</th>
<th>SOLICITADO</th>
<th>DESDE</th>
<th>HASTA</th>
<th>TIPO</th>
<th>NOMBRE</th>
<th>RGIDs</th>
<th>FILTRO</th>
<th>ESTADO</th>
<th>PROCESO INICIADO</th>
<th>PROCESO FINALIZADO</th>
<th>OPCIONES</th>
</tr>
</thead>
<tbody>
{cdrListFiltered?.map((report, reportIndex) => (
<tr key={reportIndex} >
<td>{reportIndex + 1}</td>
<td>{report.requestDate}</td>
<td>{report.startDate}</td>
<td>{report.endDate}</td>
<td>{typeReport[report.reportType]}</td>
{/* <td>{report.contactId}</td> */} // Este td muestra correctamente el serie(id) del cliente o proveedor asi que la idea es que no salga el numero si no el nombre del cliente o proveedor
<td>{cdrTypeRequest.api.map.find(data =>{return data.map.serie === report.map.contactId}).map.name}</td>
<td>{report.rgids}</td>
<td>{callFilter[report.callQuery]}</td>
<td>{statusStage[report.status]}</td>
<td>{report.processStart}</td>
<td>{report.processFinish}</td>
<td className={styles.buttonOptions}>
<Button
variant='primary'
className={styles.btnGuardar}
>
<span className={styles.textButton}>Descargar</span>
</Button>
<Button
variant='danger'
className={styles.btnEliminar}
onClick={() => handleClickDelete(report.id)}
>
<span className={styles.textButton}>Eliminar</span>
</Button>
</td>
</tr>
)
)}
</tbody>
</Table>
{/* Modal once the delete buttom has been clicked */}
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Eliminar Reporte</Modal.Title>
</Modal.Header>
<Modal.Body>¿Esta seguro que desea eliminar este reporte?</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
No
</Button>
<Button variant="danger" onClick={() => deleteCdr(selectedId)}>
Si
</Button>
</Modal.Footer>
</Modal>
</>
)
}
export default CDRTable
Agradesto mucho su ayuda chicos! Gracias