将对象数组附加到 HTML 文件中

Question

我有一组要映射的对象。我想将它附加到我的 html 文件中的无序列表中。这是我目前正在尝试做的。我收到此错误“Uncaught TypeError: Cannot read property 'appendChild' of null”。

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() 创建一个新数组，因为您实际上并没有做任何事情。