将socket源数据填充到html表中

Question

我正试图根据套接字io接收的数据填充html表。我还想显示以前的数据，当我将行添加到特定的用户id表中时，我想实时更新它。并将数据显示到HTML表中。下面是我的代码。但是它只显示来自套接字的数据，而不显示以前的记录。每当我添加新数据时，它都会显示该数据并删除先前添加的数据。

下面是我使用的代码

<div class="row"> 
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Invoice List</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="results">

</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<script type="text/javascript">

$(document).ready(function(){

function toTable( data ) {
document.getElementById( 'results' ).innerHTML = "<tr><th>COIN</th><th>EXCHANGE</th><th>MARKET</th><th>PRICE</th></tr>";
document.getElementById( 'results' ).innerHTML += "<tr><td>" + data.firstname + "</td><td>" + data.lastName.toUpperCase() +"</td></tr>";
}
var socket = io('http://localhost:5001');

socket.on('getinvoices', (data) => {
console.log(data);
toTable(data.doc);
});
});
</script>

我尝试了上面的代码，但它只是添加数据和删除以前的数据。

——JSON响应——

{
doc: {
billingAddress: "House 130 Street ABC",
city: "California",
country: "United States",
email: "[e-mail]",
firstname: "John",
lastName: "doe",
phone: "5418411247",
state: "Oregon",
zipCode: "97230",
_id: "639b28528ae035dfcd5a4612"
}
}

Answer 1

这一行:

document.getElementById( 'results' ).innerHTML = "<tr><th>COIN</th><th>EXCHANGE</th><th>MARKET</th><th>PRICE</th></tr>";

表示每次调用toTable( data )时重置表的innerHTML。您应该在HTML文件中定义表头，并从toTable( data )中删除这一行。

Answer 2

function toTable( data ) {
document.getElementById( 'results' ).innerHTML = "<tr><th>COIN</th><th>EXCHANGE</th><th>MARKET</th><th>PRICE</th></tr>";
document.getElementById( 'results' ).innerHTML += "<tr><td>" + data.firstname + "</td><td>" + data.lastName.toUpperCase() +"</td></tr>";
}

问题是，当你使用=操作符来分配它时，你正在重置innerHTML值。您有两个选项:

1°改变+=的=赋值操作符

2°在socket中也发送旧数据

第一个解决方案适用于只保留旧值1次的情况，但是使用这个解决方案，如果重新加载页面，表将只显示实际值。

如果您希望将值保存到下一次更新发生时，则第二种解决方案有效，但您也需要存储旧值。

我不知道你到底想要什么，但这两种解决方案都可以。第二种解决方案假设您有其他函数来更新值，而不会触发套接字(在正常的页面加载请求中)

Answer 3

您可以试试这段代码。JS中的DOMContentLoaded事件与jQuery中的$(document).ready()事件相同

document.addEventListener("DOMContentLoaded", function () {
function addTableContent(data, whereTo) {
var text = "<tr>";
var results = document.getElementById("results");
Object.keys(data).map((item, index) => {
whereTo === "header"
? (text += "<th>" + item.toUpperCase() + "</th>")
: (text += "<td>" + data[item] + "</td>");
});
whereTo === "header"
? (results.innerHTML = text + "</tr>")
: (results.innerHTML += text + "</tr>");
}
var data = {
doc: {
billingAddress: "House 130 Street ABC",
city: "California",
country: "United States",
email: "[e-mail]",
firstname: "John",
lastName: "doe",
phone: "5418411247",
state: "Oregon",
zipCode: "97230",
_id: "639b28528ae035dfcd5a4612"
}
};
addTableContent(data.doc, "header"); // This is to add the table header
//Uncomment these lines so you can add the data from the Socket to the table body
// var socket = io("http://localhost:5001");
// socket.on("getinvoices", (data) => {
// console.log(data);
addTableContent(data.doc); //This is to append the data to the table
// });
});

table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
text-align: center;
}

<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Invoice List</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="results">
</table>
</div>
</div>
</div>
</div>
</div>