javascript - 循环遍历 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 毫秒)更新一次。如果要延迟 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>