1

I have a Solidity contract that has a one-to-many relationship with another Solidity contract. I want to display the data in the second contract in a table in a cell in the first table.

I can create the nested table in a static form easily enough, but I don't know how many rows I will have in advance. What I have so far is the table definition:

    <table id="Table1" style="width:100%">
    <tr>
        <th style="width:4%">#</th> 
        <th style="width:10%">Field1</th>
        <th style="width:10%">Field2</th>
        <th style="width:10%">Field3</th>
        <th style="width:24%">Field4</th>
        <th style="width:42%">Field5</th>
    </tr>
    <tr>
        <td style="border: 0px"></td>
        <td style="border: 0px; font-weight: bold">Totals</td> 
        <td style="border: 0px; font-weight: bold; text-align:right; padding-right: 1em"></td>
        <td style="border: 0px; font-weight: bold; text-align:right; padding-right: 1em"></td>
        <td style="border: 0px">
        <td style="border: 0px"> 

            <table id="Table2" style="width:100%">
                <tr>
                    <th style="border: 1px; width:10%">#</th> 
                    <th style="border: 1px; width:20%">Field21</th> 
                    <th style="border: 1px; width:30%">Field22</th>
                    <th style="border: 1px; width:40%">Field23</th>
                </tr>
                <tr>
                    <td style="border: 0px"></td>
                    <td style="border: 0px; font-weight: bold">Totals</td> 
                    <td style="border: 0px; font-weight: bold; text-align:right; padding-right: 1em"></td>
                    <td style="border: 0px"></td>
                </tr>
            </table>

        </td>

    </tr>
</table>

And when displaying the data I use the following code:

    myContract.getContractInfo(function(err, res) {
        if (!err) {
            var table1 = document.getElementById("Table1");
            table1.rows[0].cells[1].innerHTML = web3.toAscii(res[0]);
            table1.rows[0].cells[3].innerHTML = Intl.NumberFormat('en-UK').format(res[1]);
            table1.rows[0].cells[5].innerHTML = myAddress;

            var total1 = 0;
            var total2 = 0;

            myContract.getNumberItems(function(err1, res1) {
            if (!err1) {
                numberItems = res1;

                for (j=0;j<numberItems;j++) { 
                    myContract.getInfo(j, function(err2, res2) {
                        if(!err2)
                            {
                            var table2 = document.getElementById("Table2");
                            var row = table2.insertRow(table2.rows.length-1);
                            var cell1 = row.insertCell(0);
                            var cell2 = row.insertCell(1);
                            var cell3 = row.insertCell(2);
                            var cell4 = row.insertCell(3);
                            var cell5 = row.insertCell(4);
                            var cell6 = row.insertCell(5);
                            var cell7 = row.insertCell(6);
                            var cell8 = row.insertCell(7);
                            cell1.innerHTML = table2.rows.length-2;
                            cell2.innerHTML = web3.toAscii(res2[0]);
                            cell3.innerHTML = Intl.NumberFormat('en-UK').format(res2[1]);
                            cell3.style.textAlign = "right";
                            cell3.style.paddingRight = "1em";
                            totalLoanBalance += parseInt(res2[1]); 
                            table2.rows[table2.rows.length-1].cells[2].innerHTML = Intl.NumberFormat('en-UK').format(totalLoanBalance);
                            cell4.innerHTML = Intl.NumberFormat('en-UK').format(res2[2]);
                            cell4.style.textAlign = "right";
                            cell4.style.paddingRight = "1em";
                            totalPurchasePrice += parseInt(res2[2]); 
                            table2.rows[table2.rows.length-1].cells[3].innerHTML = Intl.NumberFormat('en-UK').format(totalPurchasePrice);
                            cell5.innerHTML = res2[4];
                            cell6.innerHTML = web3.toAscii(res2[5]);
                            cell7.innerHTML = Intl.NumberFormat('en-UK').format(res2[6]);
                            cell7.style.textAlign = "right";
                            cell7.style.paddingRight = "1em";
                            cell8.innerHTML = res2[7];
                            }
                        }); 


                    } // for
                }
            });
        }
    });

I have found some relevant posts but I cannot figure it out. What I suppose I need to do is to create the table on the fly... As the code is now, it works in the sense that the nested table is created but it appears in the total line at the end for all nested data in one table.

I would really appreciate any help! Thanks.

closed as off-topic by Tjaden Hess Apr 27 '18 at 23:55

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "This question does not appear to be about Ethereum, the decentralized application platform and smart contract enabled blockchain, within the scope defined in the help center." – Tjaden Hess
If this question can be reworded to fit the rules in the help center, please edit the question.

  • This is an HTML/JavaScript question. Please submit it to stackoverflow – Tjaden Hess Apr 27 '18 at 23:55