如何获取JavaScript对象中events数组的所有值并渲染到页面？

为什么data.opis返回undefined？ #

opis属性并不直接属于data根对象，它是data.events数组中每个子对象的属性。直接访问data.opis找不到对应属性，因此返回undefined。

如何访问events数组及其中的opis属性？ #

• 访问整个events数组：使用data.events，比如console.log(data.events)即可打印完整事件数组。
• 访问单个事件的opis：通过数组索引定位，比如第一个事件的opis用data.events[0].opis，第二个用data.events[1].opis，以此类推。

动态渲染events内容到页面div的实现 #

假设页面存在一个id为event-container的div容器：

<div id="event-container"></div>

方法一：逐一生成元素并添加 #

const eventContainer = document.getElementById('event-container');

data.events.forEach(event => {
  const eventItem = document.createElement('div');
  // 自定义事件内容的展示格式
  eventItem.innerHTML = `
    <p><strong>状态描述：</strong>${event.opis}</p>
    <p><strong>处理中心：</strong>${event.centar || '无'}</p>
    <p><strong>时间：</strong>${new Date(event.datum).toLocaleString()}</p>
    <hr>
  `;
  eventContainer.appendChild(eventItem);
});

方法二：批量生成HTML字符串插入 #

const eventContainer = document.getElementById('event-container');

const eventHtml = data.events.map(event => `
  <div class="event-item">
    <p><strong>状态描述：</strong>${event.opis}</p>
    <p><strong>处理中心：</strong>${event.centar || '无'}</p>
    <p><strong>时间：</strong>${new Date(event.datum).toLocaleString()}</p>
    <hr>
  </div>
`).join('');

eventContainer.innerHTML = eventHtml;

两种方法都能适配数量不固定的events数组，自动按顺序渲染所有事件内容。

内容的提问来源于stack exchange，提问作者Want Help