1

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.

Imagen por consola del array api: customerList

Imagen por consola del array api: providerList

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

5
  • 1
    El arreglo de "ejemplo" que pasaste es un arreglo con 2 objetos, en lugar de 2 arreglos distintos como dijiste, me parece medio difícil comprender lo que quieres hacer, podrías tratar de explicarlo mejor mostrando los 2 arreglos? Commented el 19 oct. 2022 a las 21:49
  • Agregue dos imagenes mostrando los arreglos por consola. Lo que pasa es que ese arreglo de "ejemplo"con 2 objetos, tiene una key que es api: y el nombre de la api que estoy consumiendo, customerList o providerList, estas dos apis traen cada una un arreglo con la lista de datos como muestro en las imagenes por consola.
    – Rosh343
    Commented el 19 oct. 2022 a las 22:16
  • ya ví el arreglo, pero sigo sin entender muy bien lo que intentas, quieres filtrar desde el primero, los que se encuentren en el primero y el segundo, imprimir un valor de ese? o utilizar el valor de name del segundo, para mostrarse usando de parámetro el id del primero haciendo match con el segundo? está confuso Commented el 19 oct. 2022 a las 22:40
  • @Rosh343 no termino de entender lo que buscas, tienes los dos arreglos que tienen una estructura similar y quieres mostrar los datos de ambos arreglos en dos tablas separadas, ¿Es eso? Es que al ver el código me da la impresión de que lo que quieres es al dar click a un td buscar la fila seleccionada en uno de los dos arregos. Si puedes dar más detalles de lo que tiene actualmente y cuál es el problema será más fácil ayudar porque estamos adivinando. Commented el 19 oct. 2022 a las 22:41
  • Entiendo, en la respuesta de abajo describí un poco mejor lo que intento lograr y el contexto con detalles! Gracias por tu ayuda Alex!
    – Rosh343
    Commented el 20 oct. 2022 a las 0:06

1 respuesta 1

0

Si no entiendo mal, lo que quieres es que cuando pintas los datos de cdrListFiltered, en lugar del contactId se muestre el nombre que corresponde al campo serie de los arreglos customerList y providerList.

Creo que la solución casi la tenías, solo que usabas mal el find.

<td>{cdrTypeRequest.api.find(data => data.serie === report.contactId)?.name}</td>

El find te devuelve el primer elemento de un array que cumpla la condición, en este caso es que la propiedad serie del array cdrTypeRequest.api sea igual al campo contactId del array cdrListFiltered.

Aunque no estoy muy seguro si los datos se tienen que buscar de cdrTypeRequest.api.customerList o como tienes tu de cdrTypeRequest.api

Tampo se muy bien si hay que buscar en uno o en los 2. Estoy un poco liado

2
  • Exactamente, lo entendiste muy bien! los datos se tienen que buscar en los dos arrays customerList y providerList. Un poco de contexto; el usuario escoge en un formulario de un SELECT un cliente o proveedor, cuando el escoge la opcion se despliega la lista de clientes o proveedores en otro select y este muestra solo el nombre del cliente o proveedor en esa lista, y al enviar la consulta, en la base de datos lo que envio es el id del cliente o proveedor escogido al campo contactId, inmediatamente se renderiza una tabla con los detalles de la consulta pero muestra el Id en lugar del nombre.
    – Rosh343
    Commented el 19 oct. 2022 a las 23:59
  • Esa tabla es este componente que envié aqui, ya se estan mostrando todos los datos correctamente, pero el unico que me hace falta es el del contactId, por que no queremos que se muestre el id del cliente o proveedor si no el nombre de estos. Entonces estoy tratando de recorrer los dos arreglos y usar el find para comparar que el id(serie) de customerList o providerList sea igual a el contactI ingresado y mostrar el nombre
    – Rosh343
    Commented el 20 oct. 2022 a las 0:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.