How do I add data to a dynamic table using Javascript (React.js)?

Question

I am trying to add information to a table that dynamically grows as more information is fetched. I am doing a tokenisation project for my final year of university. I interact with the smart contract to fetch data which I then need to add to a table. I create an array from 0 up until the total supply of tokens, then pass the indexes to find the token Ids, which i then pass to multiple functions using a foreach statement to call lots of data per token. In other words, I call the tokenid, then the address, then amount and so on per token and the data comes in that order. I would then like to add those first 7 values to one row of a table, then the next 7 to the next row and so on. This is the code for getting the information:

    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();

Please see below pictures for how the information comes into the console. How do i create a dynamic table, that will grow as more information gets fetched (because when i mint a new token, total supply will increase, and so the array will increase, and then more information etc.). So that the information can be displayed nicely. Any help will be appreciated.

A suggestion is that use react-table ,that will reduce your difficulties — Muhammad Mehdi
– Muhammad Mehdi, Commented Sep 29, 2021 at 16:00

Juan Chaher · Accepted Answer · 2021-10-04 01:52:55Z

Step #1: Build an object with the obtained properties

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}


})

Step #2: Push the object to an array containing all of the table rows (Note: ideally, this would be a state variable so my example will resemble this scenario)

 setTableRows([...tableRows, row])

Step #3: Inside the markup of your component, iterate this array

tableRows.map((row)=>{
   // Row markup goes here
})

Since you are now mapping a state variable, the table will automatically resemble each state update and print the new rows as they are retrieved.

One last thing: Does the API you call allow you to retrieve all of those properties in one single call? That would be much more efficient (Maybe you built the API yourself and are able to undertake said modification).

And if the API does not provide such method, you should consider using "Promise.all" to run your API requests in parallel as opposed to synchronously. This will speed up the build time of your table rows significantly.

Collectives™ on Stack Overflow

How do I add data to a dynamic table using Javascript (React.js)?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related