我想从 json 数据在前端容器上显示 from date 和 to date

问：

我的 html 中有 4-5 个容器。请参阅下面的示例代码。

<div class="mainContainer">
  <div class="subContainer">
    <%--<button id="testdata" CssClass="btn btn-primary" runat="server">Refresh</button>--%>
      <div class="divContainer">
        <div class="appContainer"> Application 1 </div>
        <div class="hiddenContainer" id="app1" data-jsonData="0" hidden>
          <div class="lblContainer">Application 1</div>
          <div class="dateContainer">
            <div class="fromDateContainer"> <label for="fromDate">From date</label> <span class="fromDate">From Date Val</span> </div>
            <div class="toDateContainer"> <label for="toDate">To date</label> <span class="toDate">To date val</span> </div>
          </div>
          <div class="timeContainer"> <label for="timeLeft">Time remaining</label> <span>Time remaining value</span> </div>
        </div>
        <div class="appContainer" data-jsonData="1"> Application 2 </div>
        <div class="hiddenContainer" id="app2" data-jsonData="1" hidden>
          <div class="lblContainer">Application 2</div>
          <div class="dateContainer">
            <div class="fromDateContainer"> <label for="fromDate">From date</label> <span class="fromDate">From Date Val</span> </div>
            <div class="toDateContainer"> <label for="toDate">To date</label> <span class="toDate">To date val</span> </div>
          </div>
          <div class="timeContainer"> <label for="timeLeft">Time remaining</label> <span>Time remaining value</span> </div>
        </div>
      </div>
  </div>

我使用下面的javascript代码。首先，我使用 json 数据，它是一个对象数组。

Json 数据示例：

0: {
  app_Name: 'Application 1',
  to_Date: '2023-11-07T16:48:00',
  from_Date: '2023-11-09T14:47:00'
}
1: {
  app_Name: 'Application 2',
  to_Date: '2023-11-23T15:57:00',
  from_Date: '2023-11-24T15:57:00'
}

在下面的 javascript 代码中，我尝试将 id 动态添加到 html 中的容器中。

<script type="text/javascript">
  let jsonData;
  let fromDate = [];
  let toDate = [];

  function loadData(data) {
    jsonData = data;
    console.log(jsonData)
  }
  document.addEventListener("DOMContentLoaded", function() {
    let appCon = document.getElementsByClassName("appContainer");
    let hiddenCon = document.getElementsByClassName("hiddenContainer");
    // Assuming you want the first element with the class 'hiddenContainer' 
    for (let i = 0; i < appCon.length; i++) {
      fromDate.push({
        id: `fromDateId${i}`
      });
      toDate.push({
        id: `toDateId${i}`
      });
      appCon[i].addEventListener("mouseover", function() {
        let appDetails = this.dataset.jsonData;
        hiddenCon[i].removeAttribute("hidden"); /*console.log(appDetails)*/
        displayData(i)
      });
      appCon[i].addEventListener("mouseout", function() {
        hiddenCon[i].setAttribute("hidden", "true");
        // hideDetails(i); 
      });
    }
  })
  function displayData(index) {
    if (fromDate.length > index && toDate.length > index) {
      let appData = jsonData[index];
      if (appData) {
        console.log(appData);
        let fromDateId = fromDate[index].id;
        let toDateId = toDate[index].id;
        console.log("Generated Ids:" + fromDateId, toDateId) let fromDateElem = document.querySelector(`#${fromDateId}`);
        let toDateElem = document.querySelector(`#${toDateId}`);
        console.log(fromDateElem, toDateElem);
        if (fromDateElem && toDateElem) {
          let fromDateElemValue = fromDateElem.querySelector('.fromDate');
          let toDateElemValue = toDateElem.querySelector('.toDate');
          console.log(fromDateElemValue, toDateElemValue);
          if (fromDateElemValue && toDateElemValue) {
            fromDateElemValue.textContent = appData.from_Date;
            toDateElemValue.textContent = appData.to_Date;
          } else {
            console.log("One or more value elements not found.");
          }
        } else {
          console.log("One or more elements not found.");
        }
      } else {
        console.log("App data is null.");
      }
    }
  }
</script>

我卡在这里，因为 fromDateElemValue 和 toDateElemValue 在控制台中返回 null。