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