javascript - 如何在我现有的 div 中打印对象的键值数组，并根据我的数据使用带循环的 JavaScript 为每个单独的 div 重复它

Question

我已经在 J​​avaScript 中创建了一个对象数组，现在想在我现有的具有循环函数类的 div 中显示每个对象的键值。

我还想根据我的对象长度迭代我的 div DOM 创建。

let myObj = [
  {
    name: 'rajvir',
    age: 40,
    profession: 'IT'
  },
  {
    name: 'rajvir2',
    age: 30,
    profession: 'IT2'
  },
  {
    name: 'rajvir3',
    age: 35,
    profession: 'IT3'
  }
]
let objRow = document.getElementById('objRow');
for (i = 0; i < myObj.length; i++) {
   document.getElementById('objRow').innerHTML = myObj[i].name;
}

<pre>
<div>
<p id="objRow">
<span id="name"></span>
<span id="age"></span>
<span id="profession"></span>
</p>
</div>
</div>
<pre>

Answer 1

使用模板文字并使用 for each 迭代对象数组

let myObj = [{
    name: 'rajvir',
    age: 40,
    profession: 'IT'
  },
  {
    name: 'rajvir2',
    age: 30,
    profession: 'IT2'
  },
  {
    name: 'rajvir3',
    age: 35,
    profession: 'IT3'
  }
]
let objRow = document.getElementById('objRow');

let result = '';
myObj.forEach((item) => {

  result += `<div><span>${item.name}</span>
             <span>${item.age}</span>
             <span>${item.profession}</span></div>`
})

objRow.innerHTML = result;

<pre>
<div>
<p id="objRow"></p>
</div>

<pre>