遍历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>