如何用JavaScript从对象获取数据并赋值到HTML对应元素

数据老陈

2026-10-6

方案1：展示指定单个人物的信息

如果你只需要展示某一个索引对应的人物数据，直接匹配属性和DOM id即可：

// 定义你要展示的人物索引，示例为0即Peter
const targetPersonIndex = 0;
const currentPerson = people[targetPersonIndex];

// 遍历人物的所有属性，自动匹配对应id的p标签赋值
for (const [propKey, propValue] of Object.entries(currentPerson)) {
  const targetDom = document.getElementById(propKey);
  // 校验DOM存在再赋值，避免报错
  if (targetDom) {
    targetDom.textContent = propValue;
  }
}

方案2：展示所有人物的信息

你现有的HTML结构只有一套p标签，无法承载多个人物数据，需要动态生成DOM节点：

const peopleWrapper = document.getElementById('people');
// 清空原有HTML内容
peopleWrapper.innerHTML = '';

// 遍历所有人的数据
Object.values(people).forEach(personItem => {
  // 为单个人物创建独立容器
  const personContainer = document.createElement('div');
  personContainer.style.margin = '12px 0';
  personContainer.style.paddingBottom = '12px';
  personContainer.style.borderBottom = '1px solid #eee';

  // 生成对应属性的p标签
  for (const [propKey, propValue] of Object.entries(personItem)) {
    const pTag = document.createElement('p');
    pTag.textContent = `${propKey}: ${propValue}`;
    personContainer.appendChild(pTag);
  }

  peopleWrapper.appendChild(personContainer);
});