javascript - 将对象数组 append 到 HTML 文件中

Question

我有一个正在映射的对象数组。我想将它 append 到我的 html 文件中的无序列表中。这就是我目前正在尝试做的事情。我收到此错误“未捕获类型错误:无法读取 null 的属性“appendChild””。

var newWorkArray= works.map(function(work){
return {
    name : work.name,
    title : work.title,
    pic : work.pic,
    link : work.link,
    github : work.github
};


});
console.log("newArray", newWorkArray);

const workLiTag= document.createElement("li")
const workItem= document.createTextNode(newWorkArray)
workLiTag.appendChild(workItem)
document.getElementById("#work-items").appendChild(workItem)

我认为不需要，但我会添加对象数组

 var works = [
{
  name:"Lorem Ipsum",
  title: "Lorem Ipsum",
  pic: "Lorem Ipsum",
  link: "Lorem Ipsum",
  github:"Lorem Ipsum"
},

{
 name:"Ruby on Rails | Vue",
 title: "Project Manager",
 pic: "Lorem Ipsum",
 link:"Lorem Ipsum",
 github:"Lorem Ipsum"
 },

Answer 1

您忘记循环遍历新映射的数组。即使您没有这样做，.getElementById 也会接受目标元素本身的 id，而不是类似于 .querySelector 的选择器。我改用后者。 .createTextNode 尝试创建 JavaScript 对象的文本，这是错误的，如果您确实需要显示整个对象，则需要先使用 JSON.stringify 对对象进行字符串化作为文本。

var works = [
{
  name:"Lorem Ipsum",
  title: "Lorem Ipsum",
  pic: "Lorem Ipsum",
  link: "Lorem Ipsum",
  github:"Lorem Ipsum"
},
{
  name:"Ruby on Rails | Vue",
  title: "Project Manager",
  pic: "Lorem Ipsum",
  link:"Lorem Ipsum",
  github:"Lorem Ipsum"
}
];

var newWorkArray = works.map(function(work){
   return {
     name : work.name,
     title : work.title,
     pic : work.pic,
     link : work.link,
     github : work.github
   };
});

newWorkArray.forEach(function(i){
  const workLiTag = document.createElement("li");
  workLiTag.textContent = JSON.stringify(i);
  document.querySelector("#work-items").appendChild(workLiTag);
})

<ul id="work-items"></ul>

我也不明白如果输出实际上是相同的，为什么必须映射原始数组。但我只是假设你留下这个细节是为了让问题更简单。否则，我会忘记使用 .map() 创建一个新数组，因为您实际上并没有做任何事情。