遍历JavaScript对象并在每次迭代中更改表内容

Question

I need to build a table or panel/card with the json data.

I want to print the first one, then erase everything and print the next one.

I've tried with tables, panels and it didn't work.

I want to do something like the pic below.

Here's the code.

 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> 

It's only printing the first object, it never prints the next.

Answer 1

Based on your comment, I understand that you want to wait 30 seconds and overwrite the object shown in the table. You can do this using setInterval or setTimeout .

I've updated your snippet to show how you might use setInterval . Essentially, keep track of the next index of the array to show. setInterval is given a function that it calls repeatedly after a delay. This function increments the index and updates the div.

For the purposes of the example, the div updates every 1 second (1000 ms). If you want to delay 30 seconds, multiply the interval by 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>