Блог

У меня здесь есть этот код, который дает мне последнюю пару из смарт-контракта:

 document.getElementById("latestPairs").innerHTML = `<table class="table table-dark table-striped table-hover" id="latest"></table>`;
const table = document.getElementById("latest");
     const rowHeader = `<thead>
                            <tr>
                            <th>Token0</th>
                            <th>Token1</th>
                            <th>Pair</th>
                            </tr>
                        </thead>`
     table.innerHTML  = rowHeader;


pcsfactoryC.events.PairCreated({fromBlock:'latest'})
.on('data', async function(event){
         //console.log(event.returnValues);
         // Do something here
    let pairs =  event.returnValues    
    let token0 = event.returnValues['token0'];
    let token1 = event.returnValues['token1'];
    let getPair = event.returnValues['pair'];
    console.log(token0   " "   token1);
    add_row("latest", [event.returnValues['token0'], event.returnValues['token1'], event.returnValues['pair']]);

         
     })
     .on('error', console.error);
 

Это работает в консоли, как и ожидалось, однако строки не добавляются в таблицу, и я получаю следующую ошибку:

 Uncaught (in promise) ReferenceError: add_row is not defined
 

Как я могу это исправить и создать динамическую таблицу для своих данных?

Вы должны создать свою собственную функцию add_row, так как она не является встроенной функцией в js

Кроме того, функция асинхронности кажется ненужной, так как вы не используете await.

Вы можете просто добавить innerHTML в таблицу. Оберните каждую строку <tr> и каждый столбец <td> .

 function add_row(id, token0, token1, pair){
   var table = document.getElementById(id);
   const rowdata = "<tr><td>" token0 "</td><td>" token1 "</td><td>" pair "</td></tr>";
   table.innerHTML  = rowdata;
}
 

add_row v2 (Вставить сверху, а не снизу)

 function add_row(id, token0, token1, pair){
  var table = document.getElementById(id);
  
  var thead = document.querySelector('#' id ' thead').innerHTML;

   const firstrowdata = "<tbody><tr><td>" token0 "</td><td>" token1 "</td><td>" pair "</td></tr></tbody>";
  const rowdata = "<tr><td>" token0 "</td><td>" token1 "</td><td>" pair "</td></tr>";
  
   if(table.rows.length == 1)table.innerHTML  = firstrowdata;
  else{
    var tbody = document.querySelector('#' id ' tbody').innerHTML;
    table.innerHTML = "<thead>"  thead   "</thead>"   "<tbody>"   rowdata   tbody   "</tbody>";
  }
}
 

Если вы хотите проверить это, вам нужно изменить способ вызова add_row() :

 /* Removed outer [ ] after ("latest", */
add_row("latest", event.returnValues['token0'], event.returnValues['token1'], event.returnValues['pair']);