CODEWITHSUNDEEP
javascriptjson
Jean Lima
Jean Lima

Reputation: 93

Looping through JavaScript Object and changing table content on each iteration

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.

card

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.

Upvotes: 0

Views: 38

Answers (1)

ty.
ty.

Reputation: 11132

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>

Upvotes: 1

Related Questions