CODEWITHSUNDEEP
javascripthtmlreactjs
ismaeel adams
ismaeel adams

Reputation: 43

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

enter image description hereI 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.

Upvotes: 1

Views: 192

Answers (1)

Juan Chaher
Juan Chaher

Reputation: 601

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.

Upvotes: 1

Related Questions