Este es mi código HTML:
<div class="row margin-top-3"> <div class="col-sm-7"> <h2>NFTs</h2> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th id = "NFTID">NFT ID</th> <th id = "NFTNAME">NFT Name</th> <th id = "NFTCREATOR">Creator</th> </tr> </thead> <tbody id="NFT-rows"> </tbody> </table> </div> </div> </div>Las siguientes tres funciones completan la tabla por columna. El problema es que la tercera función sobrescribe la segunda columna en lugar de la tercera columna. Además, agregar una cuarta función sobrescribirá nuevamente la segunda columna.
Entonces, ¿cómo puedo volver a escribir la parte $(#id).html(content) para que se llene la siguiente columna en lugar de la segunda?
setupNFTRows: function() { console.log("setupNFTrows NFT Array = " + JSON.stringify(NFTs)); console.log("NFT = " + Object.keys(NFTs)) Object.keys(NFTs).forEach(function (NFT) { console.log("inside setupNFTrows"); $("#NFT-rows").append("<tr><td>" + "NFT_ID_" + NFT + "</td><td id='" + NFTs[NFT] + "'></td></tr>"); }); }, populateNFTNames: function() { console.log("inside populateNFTNames") let NFTIDs = Object.keys(NFTs); console.log("NFTIDs = " + NFTIDs) for(var i=0; i < NFTIDs.length; i++) { let nftid = NFTIDs[i]; NFTContract.deployed().then(function(contractInstance) { contractInstance.getNFTname.call(nftid).then(function(v) { $("#" + NFTs[nftid]).html(v.toString()); }) }) } }, populateCreators: function() { let NFTIDs = Object.keys(NFTs); for(var i=0; i < NFTIDs.length; i++) { let nftid = NFTIDs[i]; NFTContract.deployed().then(function(contractInstance) { contractInstance.getCreator.call(nftid).then(function(v) { $("#" + NFTs[nftid]).html(v.toString()); }) }) } },Esto se debe a que las tablas de datos se completan fila a fila, no columna a columna. La mejor manera de abordar esto sería comprimir sus datos en un conjunto cohesivo para llenar las filas:
const getNFTNames = (id) => { NFTContract.deployed().then(contractInstance => { contractInstance.getNFTname.call(nftid).then(v => { return v.toString(); }); }); }; const getCreators = (id) => { NFTContract.deployed().then(contractInstance => { contractInstance.getCreator.call(nftid).then(v => { return v.toString(); }); }); }; const setupNFTRows = () => { Object.keys(NFTs).forEach(id => { $("#NFT-rows").append( `<tr id='NFT_ID_${id}'> <td>NFT_ID_${id}</td> <td>${getNFTNames(id)}</td> <td>${getCreators(id)}</td> </tr>`); }); };