Append an array of objects into an HTML file

Question

I have an array of objects that I am mapping through. I would like to append it into an unordered-list in my html file. This what I am currently trying to do. I am getting this error " 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)

I dont think its needed but I'll add the array of objects

 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"
 },

getElementById("#work-items") should not contain #. There is no element with an ID equal to "#work-items" so getElementById returns null — ibrahim mahrir
– ibrahim mahrir, Commented Jan 14, 2019 at 0:41
... BTW, document.createTextNode(newWorkArray) will result in this text node: "[[objectObject],[objectObject],...]", use JSON.stringify or construct DOM elements for each property. — ibrahim mahrir
– ibrahim mahrir, Commented Jan 14, 2019 at 0:44

Potato Salad · Accepted Answer · 2019-01-14 00:54:07Z

1

You forgot to loop through your newly mapped array. And even if you didn't, .getElementById accepts the id of your target element itself, not a selector similar to .querySelector. I used the latter instead. .createTextNode attempts to create a text of a javascript object, which is wrong, you need to stringify the object first using JSON.stringify if you really need to display the entire object as a text.

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>

I also do not understand why you have to map the original array if the output is literally the same. But I'm just gonna assume you left that detail in order to make the question more straightforward. Otherwise, I would forget about creating a new array using .map() since you're not really doing anything.

answered Jan 14, 2019 at 0:54

Potato Salad

4,6603 gold badges22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jonathan V Britannia Over a year ago

Youre right, I dont know why I was mapping through it. Thanks. I still get this error though Uncaught TypeError: Cannot read property 'appendChild' of null. Even after I changed everything.

Potato Salad Over a year ago

@JonathanVBritannia You need to inspect your changes more closely since my snippet works without errors. You can try running the snippet. Or is there something else that we have missed that isn't included in your question? You can try wrapping the javascript under window.onload = function(){} just to make sure the html is properly loaded before appending anything to it. Or just put the scripts at the bottom

Collectives™ on Stack Overflow

Append an array of objects into an HTML file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related