Looping through JavaScript Object and changing table content on each iteration

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.

Jean, I've edited your question and combined your code snippets into one, runnable snippet. If this doesn't accurately represent your issue, feel free to revert my edit. That said, your code constantly overwriting the text for the same elements with each loop - the final output will always be the *last* item in your array. Can you explain how the current output differs from your desired output? If you'd like separate blocks for each set of data, create new elements and append them to the page, rather than continuously updating the same, pre-existing elements. — Tyler Roper, Apr 18 '19 at 18:56
Thank you for your edit. I wanted to wait 30 seconds before printing the next object. I've used the sleep function(). I just forgot to put it on the post. But I can see only one object, the second one isn't being printed — Jean Lima, Apr 18 '19 at 18:59
If you [edit your question](https://stackoverflow.com/posts/55752161/edit), you'll see a link that says *"Edit this snippet"* underneath the code. From there, you can add your `sleep()` function to more accurately represent your use-case. For the sake of the demo though, don't use 30 seconds - just 2 or 3 should hypothetically result in the same behavior. (Although if it doesn't, perhaps the 30 seconds *is* relevant, but 2 seconds would be a starting point.) — Tyler Roper, Apr 18 '19 at 19:00
@JeanLima If this is your actual code, the issue is simple: `sleep()` is not a function in JavaScript. Your code updates the elements, gets to the line that says `sleep()`, and throws an exception, thus halting the execution. If you'd like to implement a sleep function, see [this answer](https://stackoverflow.com/a/39914235/2026606). That said, I'm not sure I'd go that route - holding on a single line for 30 seconds seems like a sketchy way to reproduce already-existing functionality. A recursive `setTimeout()`, or a `setInterval()`, would likely be more appropriate. — Tyler Roper, Apr 18 '19 at 19:04

score 1 · Accepted Answer · answered Apr 18 '19 at 19:04

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>

Thank you, it worked. I am new to JS, struggling with basic things — Jean Lima, Apr 18 '19 at 19:08

Looping through JavaScript Object and changing table content on each iteration

1 Answers1