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
– Tyler Roper, Commented Apr 18, 2019 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
– Jean Lima, Commented Apr 18, 2019 at 18:59
If you edit your question, 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
– Tyler Roper, Commented Apr 18, 2019 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. 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
– Tyler Roper, Commented Apr 18, 2019 at 19:04

ty. · Accepted Answer · 2019-04-18 19:04:57Z

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

Collectives™ on Stack Overflow

Looping through JavaScript Object and changing table content on each iteration

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related