我正在使用 ejs 在前端回圈一個陣列，并在 bootstrap 5 表中顯示資料。該表是動態的，因此將隨時間添加和洗掉行。
所有資料都沒有錯誤地通過并且表格正在填充，但是，我希望第一列顯示每一行的“計數”。例如，“1、2、3、4、5 等”。
我嘗試使用indexOf沒有任何成功，因為代碼已經存在于回圈中，創建另一個回圈需要我切換我的 ejs 語法并且我失去了計算陣列長度的能力。
下面是我的客戶端代碼，它在每一行-1的整個#列中產生值：
<div class="col-12 d-flex flex-row-reverse">
<a href="" class="a1" onclick="exportTableToCSV(null, 'text.csv')">Export to csv</a>
</div>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Email</th>
<th scope="col">Gender</th>
<th scope="col">Age</th>
<th scope="col">Clicked IG</th>
<th scope="col">Date Added</th>
<th scope="col">Remove</th>
</tr>
</thead>
<tbody>
<% for (let fan of artist.fans){%>
<tr>
<th scope="row"><%= artist.fans.indexOf(fan.id) %></th>
<td><%= fan.email %></td>
<td><%= fan.gender %></td>
<td><%= fan.age %></td>
<td><%= fan.subscribed %></td>
<td><%= fan.dateAdded %></td>
<td style="padding-left: 2rem;">
<button onclick="removeRow()" ></button>
</td>
<td style="padding-left: 2rem;"><i class="bi bi-trash"></i></td>
<% } %>
</tr>
</tbody>
</table>
</div>
如果我切換artist.fans.indexOf(fan.id)，我會為每個粉絲電子郵件物件獲得相應的 objectId 。 fan.id
如果我切換artist.fans.indexOf(fan.id)，artist.fans.length我會7在#每一行的列下。
這是我的資料庫模型：
const artistSchema = new Schema({
image: [ImageSchema],
genre: [ String ],
fans: [{
email: String,
subscribed: String,
gender: String,
age: Number
dateAdded: {
type: Date,
default: Date.now
}
}],
});
如何讓每一行編號？
uj5u.com熱心網友回復：
問題是您用作無法直接訪問fan.id的搜索引數throw the所以您需要使用另一種接受的方法，以便您可以比較它們的 idartist.fans.indexOf(fan.id)artist.fanscomparing function
嘗試使用
<th scope="row"><%= artist.fans.findIndex(f=> f.id == fan.id) %></th>
uj5u.com熱心網友回復：
TL;博士：
只需這樣做：
<% for( const fan of artist.fans.map( ( e, index ) => ({ index, ...e }) ) ) { %>
<tr>
<th scope="row"><%= fan.index %></th>
<td><%= fan.email %></td>
<!-- etc -->
</tr>
<% }%>
解釋：
我想讓第一列顯示每一行的“計數”。例如，“1、2、3、4、5 等”。
這不是“計數”。我將其稱為“行號”（如果基于 1）或“行索引”（如果基于 0）。
如果您使用 SQL 來獲取資料，那么您可以
ROW_NUMBER()在查詢中使用并將其映射到您型別中的一些新number屬性。Fan- 請注意，如果沒有明確定義的標準，
ROW_NUMBER()值是沒有意義的。ORDER BY
- 請注意，如果沒有明確定義的標準，
不要
indexOf在回圈中使用：時indexOf復雜性O(n)為O(n^2)- 這也適用于其他
O(n)歸約函式，如findIndex、find、includes和lastIndexOf。 - 此外，
indexOf（和其他）僅在 上定義Array.prototype，因此它不適用于其他型別的可迭代物件，例如NodeList.
- 這也適用于其他
在 ejs 中，您可以使用
Array.prototype.map為您index提供 each的多載element，并將其粘貼index到每個element物件中，如下所示：
const fansWithIndex = artist.fans
.map( function( element, index ) {
element.index = index;
return element;
} );
<% for( const fan of fansWithIndex ) { %>
<tr>
<th scope="row"><%= fan.index %></th>
<td><%= fan.email %></td>
<!-- etc -->
</tr>
<% }%>
...盡管 FP 純粹主義者（像我自己）會爭辯說上面的例子是糟糕的代碼，因為它會改變源資料，而Object.assign應該改為使用。function此外，可以使用箭頭函式使長格式更簡單=>，如下所示：
const fansWithIndex = artist.fans.map( ( e, idx ) => Object.assign( { index: idx }, e ) );
<% for( const fan of fansWithIndex ) { %>
<tr>
<th scope="row"><%= fan.index %></th>
<td><%= fan.email %></td>
<!-- etc -->
</tr>
<% }%>
這可以進一步簡化：
- 作為
Object.assign物件擴展運算子...obj的替代方法，可以使用：{ index: idx, ...e }在語意上幾乎與Object.assign( { index: idx }, e ).- 不同之處在于
Object.assign它將呼叫自定義setter函式，而...語法則不會。
- 不同之處在于
- 注意：當立即從內部回傳一個物件文字時，
map您需要將物件文字的大括號括{}在括號中()，以防止大括號被決議為函式體分隔符，因此=> ({ foo: bar })而不是=> { foo: bar }.
index: idx可以通過將引數重命名為idx并index放置來簡化{ index, ...e }。- 像這樣：
const fansWithIndex = artist.fans.map( ( e, index ) => ({ index, ...e }) );
<% for( const fan of fansWithIndex ) { %>
<tr>
<th scope="row"><%= fan.index %></th>
<td><%= fan.email %></td>
<!-- etc -->
</tr>
<% }%>
- 因為該
artist.fans.map(...)部分是具有單個輸出的單個運算式，您現在可以將其直接行內到您的for(of)陳述句中，如下所示：
<% for( const fan of artist.fans.map( ( e, index ) => ({ index, ...e }) ) ) { %>
<tr>
<th scope="row"><%= fan.index %></th>
<td><%= fan.email %></td>
<!-- etc -->
</tr>
<% }%>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/473814.html
標籤：javascript 数组 循环 数据表