按日期拆分返回的数据

Split the returned data by date

提问人：Anonimo 提问时间：8/14/2023 最后编辑：Peter SeligerAnonimo 更新时间：8/15/2023 访问量：81

问：

我按如下方式返回我的表格，其中我有两个 12 日的预期结果和 13 日的两个预期结果。

var data = [{
    Designacao: "Micro-ondas1",
    Capitulo: "Cozinha",
    Data: "2023-08-12",
  },
  {
    Designacao: "Exaustor cinzento 1",
    Capitulo: "",
    Data: "2023-08-12",
  },
  {
    Designacao: "Mesa - Castanha -8 Lugares",
    Capitulo: "Sala",
    Data: "2023-08-13"
  },
  {
    Designacao: "cama",
    Capitulo: "Quarto",
    Data: "2023-08-13",
  },
];

var linha = ``;

Object.keys(data).forEach(i => {

  Designacao = data[i].Designacao;
  Capitulo = data[i].Capitulo;
  Data = data[i].Data;

  if (Data != Data) {
    linha += `<div class="card-header">Data Passagem de Turno - ${Data}</div>`;
  }

  linha += `<div class="row col-md-12">
            <div class="col-md-4">
              <p class="form-label">Data </p>
              <input type="text" class="form-control" name="dataen" value="${Data}">
            </div>
            <div class="col-md-3">
              <p class="form-label">Código Utente </p>
              <input type="text" class="form-control" name="codigoen" value="${Capitulo}" disabled="disabled">
            </div>
            <div class="col-12">
              <p class="form-label">Diário de Enfermagem </p>
              <textarea rows="6" class="form-control" name="didiarenf" > ${Designacao} </textarea>
            </div>`;

  $(".histpturno").html(linha);

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="histpturno"></div>

我打算按天分开结果。例如，在第 12 个结果的第一个结果之前，显示 if 内的标头，然后仅在返回第 13 个结果时再次显示标头

我试图用 if 实现预期，但它不起作用，它从不返回标头。我所指的标题是 if 中的这个：

<div class="card-header">Data Passagem de Turno - ${Data}</div>
JavaScript DOM 数据结构 渲染

评论

0赞 Jack A. 8/14/2023
您的 if 语句正在将 与自身进行比较，这始终为 true。您需要在跟踪当前日期的变量之外创建并初始化一个变量，与 if 语句中的变量进行比较，并在它更改时更新它。Dataforeach
0赞 Peter Seliger 8/14/2023
OP 可能会考虑一种方法，它不会试图一次实现所有目标，而是将数据（重新）结构化任务与（最终）渲染任务分开。因此，实际需要的解决方案需要按任何项目的同一日期对数据项进行分组和收集，例如，这可以通过将源数据数组简化为具有与分组键相同的日期值的对象/索引来实现。然后，简化的数据结构是渲染过程的基础。

答：

1赞 CBroe 8/14/2023 #1

if(Data != Data)

应该很明显，这永远不会是真的，不是吗？ 不会在比较运算符两侧的两个读取访问之间更改。Data

您需要将当前值与您处理的上一条记录的值进行比较。最简单的是，如果将前一个值存储到变量中，则使用实际数据中不会出现的值进行初始化（以便检查将在第一条记录上返回 true）。

var data = [{
    Designacao: "Micro-ondas1",
    Capitulo: "Cozinha",
    Data: "2023-08-12",
  },
  {
    Designacao: "Exaustor cinzento 1",
    Capitulo: "",
    Data: "2023-08-12",
  },
  {
    Designacao: "Mesa - Castanha -8 Lugares",
    Capitulo: "Sala",
    Data: "2023-08-13"
  },
  {
    Designacao: "cama",
    Capitulo: "Quarto",
    Data: "2023-08-13",
  },
];

var linha = ``;
var prevData = null; // initialize

Object.keys(data).forEach(i => {

  Designacao = data[i].Designacao;
  Capitulo = data[i].Capitulo;
  Data = data[i].Data;

  if (Data !== prevData) { // compare; for safety using strict type checking
    linha += `<div class="card-header">Data Passagem de Turno - ${Data}</div>`;
  }
  prevData = Data; // update, so that this will hold the correct "previous" record on the next iteration

  linha += `<div class="row col-md-12">
            <div class="col-md-4">
              <p class="form-label">Data </p>
              <input type="text" class="form-control" name="dataen" value="${Data}">
            </div>
            <div class="col-md-3">
              <p class="form-label">Código Utente </p>
              <input type="text" class="form-control" name="codigoen" value="${Capitulo}" disabled="disabled">
            </div>
            <div class="col-12">
              <p class="form-label">Diário de Enfermagem </p>
              <textarea rows="6" class="form-control" name="didiarenf" > ${Designacao} </textarea>
            </div>`;

  $(".histpturno").html(linha);

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="histpturno"></div>

0赞 Peter Seliger 8/14/2023 #2

从我上面的评论......

“OP 可能会考虑一种方法，它不会试图一次实现所有目标，而是将数据（重新）结构化任务与（最终）渲染任务分开。因此，实际需要的解决方案需要按任何项目的同一日期对数据项进行分组和收集，例如，这可以通过将源数据数组简化为具有与分组键相同的日期值的对象/索引来实现。然后，简化的数据结构是渲染过程的基础。

function renderLogsFromDateIndex(rootNode, index) {
  rootNode.innerHTML = Object
    .entries(index)
    .reduce((dateItemMarkup, [date, logs]) => [

      dateItemMarkup,
      `<div class="card-header">Data Passagem de Turno - ${ date }</div>`,

      logs
        .reduce((logItemMarkup, { Data, Capitulo, Designacao }) =>

          `${ logItemMarkup }<div class="row col-md-12">
            <div class="col-md-4">
              <p class="form-label">Data </p>
              <input type="text" class="form-control" name="dataen" value="${ Data }">
            </div>
            <div class="col-md-3">
              <p class="form-label">Código Utente </p>
              <input type="text" class="form-control" name="codigoen" value="${ Capitulo }" disabled="disabled">
            </div>
            <div class="col-12">
              <p class="form-label">Diário de Enfermagem </p>
              <textarea rows="6" class="form-control" name="didiarenf" > ${ Designacao } </textarea>
            </div>
          </div>`, ''
        ),

    ].join(''), '');
}

const data = [
  { Designacao: "Micro-ondas1", Capitulo: "Cozinha", Data: "2023-08-12", },
  { Designacao: "Exaustor cinzento 1", Capitulo: "", Data: "2023-08-12", },
  { Designacao: "Mesa - Castanha -8 Lugares", Capitulo: "Sala", Data: "2023-08-13" },
  { Designacao: "cama", Capitulo: "Quarto",  Data: "2023-08-13", },
];

const logsByDate = data
  .sort((a, b) => new Date(a.Data) - new Date(b.Data))
  .reduce((index, item) => {
    (index[item.Data] ??= []).push(item)
    return index;
  }, {});

console.log({ logsByDate });

renderLogsFromDateIndex(
  document.querySelector('.histpturno'), logsByDate
);
.card-header {
  margin: 20px 0 0 0;
  background: #eee;
}
.as-console-wrapper {
  left: auto!important;
  min-height: 100%;
  width: 60%;
}
<div class="histpturno"></div>

评论

0赞 Peter Seliger 8/15/2023
@Anonimo......OP 可能会看一下上面提供的迟到答案。

上一个：如何在 while 内的 td 中显示数组

下一个：将 fullcalendar 变量发送到 PHP