Добавить массив объектов в файл HTML - PullRequest
Новая
       15

Добавить массив объектов в файл HTML

0 голосов
/ 14 января 2019

У меня есть массив объектов, которые я отображаю. Я хотел бы добавить его в неупорядоченный список в моем HTML-файле. Это то, что я сейчас пытаюсь сделать. Я получаю эту ошибку "Uncaught TypeError: Невозможно прочитать свойство 'appendChild' из 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"
 },

1 Ответ

0 голосов
/ 14 января 2019

Вы забыли перебрать свой недавно сопоставленный массив. И даже если вы этого не сделали, .getElementById принимает идентификатор самого целевого элемента, а не селектор, подобный .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(), поскольку вы ничего не делаете.

...