如何从对象中获取数据并在html中的元素中分配 - javascript代码[关闭]

Posted 2023-05-08

【中文标题】如何从对象中获取数据并在html中的元素中分配 - javascript代码[关闭]

【英文标题】：How to get data from object and assign in element in html - code by javascript [closed]

【发布时间】：2021-10-27 21:58:59

【问题描述】：

我正在研究如何通过 javascript 从 Object 获取数据，但我遇到了困难。我有一个这样的对象：

var people = 
  0: 
    "name": "Peter",
    "age": 23,
    "gender": "male",
    "job": "developer"
  ,
  1: 
    "name": "Anna",
    "age": 22,
    "gender": "female",
    "job": "business"
  ,
  2: 
    "name": "Jennifer",
    "age": 18,
    "gender": "female",
    "job": "student"
  

我也有一个这样的html文件：

<div id="people">
    <p id="name"></p>
    <p id="age"></p>
    <p id="gender"></p>
    <p id="job"></p>
</div>

如何遍历我的对象来获取数据并将其分配给相应的 p 标签。请帮我。谢谢。

【问题讨论】：

“我正在挣扎”不是一个足够精确的错误描述，我们无法为您提供帮助。 什么不起作用？ 如何不起作用？你的代码有什么问题？您收到错误消息吗？错误信息是什么？你得到的结果不是你期望的结果吗？你期望什么结果，为什么，你得到的结果是什么，两者有什么不同？您正在观察的行为不是期望的行为吗？期望的行为是什么，为什么，观察到的行为是什么，它们有何不同？

idownvotedbecau.se/itsnotworkingidownvotedbecau.se/noexceptiondetailsidownvotedbecau.se/nocodeidownvotedbecau.se/noattemptidownvotedbecau.se/nomcve

【参考方案1】：

HTML <div id="people"></div>

然后是纯Javascript

for(person in people)
    const container = document.createElement('div');
    const name = document.createElement('p'); 
    name.appendChild(document.createTextNode(people[person].name));
    const age = document.createElement('p'); 
    age.appendChild(document.createTextNode(people[person].age));
    const gender = document.createElement('p'); 
    gender.appendChild(document.createTextNode(people[person].gender));
    const job = document.createElement('p'); 
    job.appendChild(document.createTextNode(people[person].job));

    container.appendChild(name);
    container.appendChild(age);
    container.appendChild(gender);
    container.appendChild(job);

    document.getElementById("people").appendChild(container);

【讨论】：

哦，非常感谢。这对我帮助很大。

【参考方案2】：

要遍历对象，您可以使用Objet.values method。对于迭代本身，您可以使用for...of 或forEach。为了方便地构造你的字符串，你可以使用template literals。

基本代码如下：

let out = "";
for (let person of Object.values(people)) 
  out +=`
    <div class=people>
      <p class=name>$person.name</p>
      <p class=age>$person.age</p>
      <p class=gender>$person.gender</p>
      <p class=job>$person.job</p>
    </div>
  `;


document.write(out);

我还选择了使用类，因为 id 应该是唯一的。