0
147
Vistastomar información de una matriz y cargarla en una tabla
¡Gracias por leer mi publicación!
He estado tratando de crear una función que tome los objetos en una matriz de datos de empleados y los muestre en una tabla.
Dentro de la clase llamada 'sistema', tengo system.giveAllEmployees(), que devuelve la matriz de todos los empleados, mientras que system.giveAllOffers() devuelve todas las ofertas activas que se han puesto en el sistema. Todo debe organizarse en la tabla employeeData, y revisar y ver cuántas ofertas se asignan a cada empleado, y agregar eso a la tabla también. Funciona y se carga en la tabla, pero en lugar de actualizar la oferta para cada empleado, cada vez que se carga una nueva oferta en el sistema, actualiza el número de oferta para todos los empleados en la tabla.
Supongo que esto se debe a cómo configuré el ciclo. pero estoy realmente perplejo en cuanto a por qué sucede esto. Puedo proporcionar cualquier otra información o código necesario, si alguien conoce una mejor manera de cargar datos de matrices en una identificación de tabla, ¡también lo agradezco!
function loadAll() { var a = system.giveAllEmployees(); var b = system.giveAllOffers(); var tr = ""; var table = document.getElementById("employeeData"); let offers = 0; table.innerHTML = ""; a.forEach( x => { b.forEach( y => { if (x.employeeName === y.name) { offers += 1; } return offers; }), tr += '<tr>'; tr += '<td>' + x.name + '</td>' + '<td>' + x.document + '</td>' + '<td>' + x.departament + '</td>' + '<td>' + x.age + '</td>' + '<td>' + offers + '</td>'; tr += '</tr>'; offers = 0; }) table.innerHTML += tr; }Y para el contexto, aquí hay una imagen de la tabla en la que se cargan los datos:
¡Gracias de nuevo por cualquier consejo o ayuda sobre este problema!
1 Respuestas
Responde la pregunta0
Sospecho un error por descuido:
cambio
if (x.employeeName === y.name) {
a
if (y.employeeName === x.name) {
código completo:
para información -> https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertRow
function loadAll() { const Employees = system.giveAllEmployees() , Offers = system.giveAllOffers() , tableBody = document.querySelector('#employee-table > tbody') ; tableBody.innerHTML = ''; Employees.forEach( emp => { let newRow = tableBody.insertRow() newRow.insertCell().textContent = emp.name newRow.insertCell().textContent = emp.document newRow.insertCell().textContent = emp.departament newRow.insertCell().textContent = emp.age newRow.insertCell().textContent = Offers.filter(({employeeName:eNam})=>eNam===emp.name).length }) }Demostración ( y para mostrarle cómo hacer para sus próximas preguntas )
function loadAll() { const Employees = system.giveAllEmployees() , Offers = system.giveAllOffers() , tableBody = document.querySelector('#employee-table > tbody') ; tableBody.innerHTML = ''; Employees.forEach( emp => { let newRow = tableBody.insertRow() newRow.insertCell().textContent = emp.name newRow.insertCell().textContent = emp.document newRow.insertCell().textContent = emp.departament newRow.insertCell().textContent = emp.age newRow.insertCell().textContent = Offers.filter(({employeeName: eNam})=>eNam===emp.name).length }) } // test datas const system = { giveAllEmployees() { return ( [ { name: 'Joseph', document: '123456', departament : 'Artgas', age: 23 } , { name: 'Mary', document: '666222', departament : 'Artgas', age: 41 } ] ) } , giveAllOffers() { return ( [ { employeeName: 'Mary', xxx: 'xxx' } , { employeeName: 'Joseph', zzz: 'zzz' } , { employeeName: 'Mary', yyy: 'yyy' } ] ) } }; // testing : loadAll() table#employee-table { font-family : Arial, Helvetica, sans-serif; font-size : 12px; border-collapse : separate; border-spacing : 1px; background-color : darkslategrey; } #employee-table th, #employee-table td { background-color : whitesmoke; padding : .3em .6em; text-align : center; } <table id="employee-table"> <thead> <tr> <th>Employee Name</th> <th>Document</th> <th>Departement</th> <th>Age</th> <th>Number of Offers</th> </tr> </thead> <tbody></tbody> </table>