0
527
Views¿Cómo agrego datos a una tabla dinámica usando Javascript (React.js)?
Estoy tratando de agregar información a una tabla que crece dinámicamente a medida que se obtiene más información. Estoy haciendo un proyecto de tokenización para mi último año de universidad. Interactué con el contrato inteligente para obtener datos que luego necesito agregar a una tabla. Creo una matriz desde 0 hasta el suministro total de tokens, luego paso los índices para encontrar los identificadores de token, que luego paso a varias funciones usando una instrucción foreach para llamar a una gran cantidad de datos por token. En otras palabras, llamo al tokenid, luego a la dirección, luego a la cantidad y así sucesivamente por token y los datos vienen en ese orden. Luego me gustaría agregar esos primeros 7 valores a una fila de una tabla, luego los siguientes 7 a la siguiente fila y así sucesivamente. Este es el código para obtener la información:
const createindexlist = async () => { limit = await callsupplyfunction(); var c = Number(limit); for (var i = 0; i < c; i++) { list.push(i); } console.log(list); for (var j = 0; j < list.length; j++) { var x = await a(list[j]); tokenList.push(x); } console.log(tokenList); tokenList.forEach(async (token) => { const id = token; const owner = await contract.methods.ownerOf(token).call(); const amount = await contract.methods.getLoanAmount(token).call(); const rate = await contract.methods.getRate(token).call(); const term = await contract.methods.getTerm(token).call(); const start = await contract.methods.getStartDate(token).call(); const end = await contract.methods.getEndDate(token).call(); console.table(id); console.table(owner); console.table(amount); console.table(rate); console.table(term); console.table(start); console.table(end); HTMLTableRowElement.apply(id, owner); }) } createindexlist();Consulte las siguientes imágenes para ver cómo llega la información a la consola. ¿Cómo creo una tabla dinámica, que crecerá a medida que se obtenga más información (porque cuando acuño un nuevo token, el suministro total aumentará, por lo que la matriz aumentará, y luego más información, etc.). Para que la información se pueda mostrar bien. Cualquier ayuda será apreciada.
1 answers
Answer question0
Paso #1: Construye un objeto con las propiedades obtenidas
tokenList.forEach(async (token) => { const id = token; const owner = await contract.methods.ownerOf(token).call(); const amount = await contract.methods.getLoanAmount(token).call(); const rate = await contract.methods.getRate(token).call(); const term = await contract.methods.getTerm(token).call(); const start = await contract.methods.getStartDate(token).call(); const end = await contract.methods.getEndDate(token).call(); console.table(id); console.table(owner); console.table(amount); console.table(rate); console.table(term); console.table(start); console.table(end); // Row object let row = {id, owner, amount, rate, term, start, end} })Paso #2: Empuje el objeto a una matriz que contenga todas las filas de la tabla (Nota: idealmente, esta sería una variable de estado, por lo que mi ejemplo se parecerá a este escenario)
setTableRows([...tableRows, row])Paso #3: Dentro del marcado de su componente, itere esta matriz
tableRows.map((row)=>{ // Row markup goes here })Dado que ahora está asignando una variable de estado, la tabla se parecerá automáticamente a cada actualización de estado e imprimirá las nuevas filas a medida que se recuperan.
Una última cosa: ¿La API a la que llama le permite recuperar todas esas propiedades en una sola llamada? Eso sería mucho más eficiente (tal vez usted mismo creó la API y puede realizar dicha modificación).
Y si la API no proporciona dicho método, debería considerar usar " Promise.all " para ejecutar sus solicitudes de API en paralelo en lugar de sincrónicamente. Esto acelerará significativamente el tiempo de construcción de las filas de su tabla.