遍歷JavaScript對象並在每次迭代中更改表內容

Question

我需要使用json數據構建表或面板/卡。

我要打印第一個，然后擦除所有內容並打印下一個。

我已經嘗試過使用桌子，面板，但是沒有用。

我想做下面的照片。

這是代碼。

 const js = [{ "category": "Apoio", "serviceSecondLevel": "CTB - Contabilidade", "serviceFirstLevel": "Contabilidade", "status": "Novo", "createdDate": "2019-04-17T12:47:51.0299221", "ownerTeam": "Administradores", "id": 13062, "customFieldValues": [{ "items": [{ "customFieldItem": "Crítica" }], "customFieldId": 18289, "customFieldRuleId": 8423, "line": 1, "value": null }], "clients": [{ "businessName": "Usuario" }] }, { "category": "Apoio", "serviceSecondLevel": null, "serviceFirstLevel": "ADM - Administrativo", "status": "Novo", "createdDate": "2019-04-17T14:35:50.6543365", "ownerTeam": "Administradores", "id": 13133, "customFieldValues": [{ "items": [{ "customFieldItem": "Baixa" }], "customFieldId": 18289, "customFieldRuleId": 8423, "line": 1, "value": null }], "clients": [{ "businessName": "Usuario" }] }]; js.forEach(function(o) { var area = o.serviceSecondLevel == null ? o.serviceFirstLevel : o.serviceSecondLevel; $('#area').text(area); $('#numero').text(o.id); $('#solicitante').text(o.clients[0].businessName); $('#categoria').text(o.category); $('#status').text(o.status); $('#severidade').text(o.customFieldValues[0].items[0].customFieldItem); $('#data').text(o.createdDate); $('#hora').text(o.createdDate); sleep(30); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr> <td id="area"></td> <td id="numero"></td> </tr> <tr> <td id="solicitante"></td> <td id="categoria"></td> </tr> <tr> <td id="status"></td> <td id="severidade"></td> </tr> <tr> <td id="data"></td> <td id="hora"></td> </tr> </tbody> </table> 

它僅打印第一個對象，而從不打印下一個對象。

Answer 1

根據您的評論，我了解您要等待30秒並覆蓋表中顯示的對象。 您可以使用setInterval或setTimeout進行此操作。

我已經更新了您的代碼段，以顯示您如何使用setInterval 。 本質上，跟蹤要顯示的數組的下一個索引。 setInterval被賦予一個函數，該函數在延遲后會重復調用。 此函數增加索引並更新div。

就本示例而言，div每1秒（1000 ms）更新一次。 如果要延遲30秒，則將間隔乘以30：

 const js = [{ "category": "Apoio", "serviceSecondLevel": "CTB - Contabilidade", "serviceFirstLevel": "Contabilidade", "status": "Novo", "createdDate": "2019-04-17T12:47:51.0299221", "ownerTeam": "Administradores", "id": 13062, "customFieldValues": [{ "items": [{ "customFieldItem": "Crítica" }], "customFieldId": 18289, "customFieldRuleId": 8423, "line": 1, "value": null }], "clients": [{ "businessName": "Usuario" }] }, { "category": "Apoio", "serviceSecondLevel": null, "serviceFirstLevel": "ADM - Administrativo", "status": "Novo", "createdDate": "2019-04-17T14:35:50.6543365", "ownerTeam": "Administradores", "id": 13133, "customFieldValues": [{ "items": [{ "customFieldItem": "Baixa" }], "customFieldId": 18289, "customFieldRuleId": 8423, "line": 1, "value": null }], "clients": [{ "businessName": "Usuario" }] }]; var idx = 0; setInterval(function() { var o = js[idx++ % js.length]; var area = o.serviceSecondLevel == null ? o.serviceFirstLevel : o.serviceSecondLevel; $('#area').text(area); $('#numero').text(o.id); $('#solicitante').text(o.clients[0].businessName); $('#categoria').text(o.category); $('#status').text(o.status); $('#severidade').text(o.customFieldValues[0].items[0].customFieldItem); $('#data').text(o.createdDate); $('#hora').text(o.createdDate); }, 1000); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr> <td id="area"></td> <td id="numero"></td> </tr> <tr> <td id="solicitante"></td> <td id="categoria"></td> </tr> <tr> <td id="status"></td> <td id="severidade"></td> </tr> <tr> <td id="data"></td> <td id="hora"></td> </tr> </tbody> </table>