javascript - 将元素 ID 传递给由 forEach 在对象数组上运行的函数

Question

我有一个经典的 JavaScript 函数，它接受一个对象，创建一个具有对象值的元素并将其附加到 DOM：

//the object
const myObj= {
  id: 1,
  name: "Mike",
};
//getElementBy
const gId = function (id) {
  return document.getElementById(id);
};
//the function
function createProfileElementDOM(obj, parentId) { //provide object and element id for appending 
  const demo = gId(parentId);
  const newEl = document.createElement("div");
  newEl.className = "user-profile";
  newEl.innerHTML = `${obj.id} <spam> ${obj.name} <span>`;
  demo.appendChild(newEl);
}

createProfileElementDOM(myObj, "demo")

它适用于这个简单的场景。

如何使它与对象数组（JSON）上的 forEach 一起使用：

const myObjs= [{
  id: 1,
  name: "Mike",
},
{
  id: 2,
  name: "Mary",
}
];

myObjs.forEach(createProfileElementDOM(myObj, "demo"))

这不起作用，但如果我在 createProfileElementDOM 函数中没有自定义参数，它确实起作用，即myObjs.forEach(createProfileElementDOM)

我是否需要单独的功能才能使其工作？有一个更好的方法吗？

标签： javascript

Answer 1

您需要为该forEach()函数使用正确的语法才能使其正常工作。

myObjs.forEach(function (myObj) {
    createProfileElementDOM(myObj, 'demo')
})