时间戳

首页 > 解决方案 > 数组到 HTML 元素并附加到 ul

javascript - 数组到 HTML 元素并附加到 ul

问题描述

当给定数组包含员工列表时

let names = [
  { firstName: 'John', lastName: 'Doe', DOB: '01Jan1970', role: 'cook' },
  { firstName: 'Mary', lastName: 'Jane', DOB: '11Sep2000', role: 'server' },
];

并且已经提供了#ul，

<ul id="container">
  <li>
    <a class="name">John Doe</a>
    <div class="age">41</div>
  </li>
  <li>
    <a class="name">Mary Jane</a>
    <div class="age">20</div>
  </li>
</ul>

我需要使它在单击名称时返回员工的角色，这是我的代码：

function printRole(user) {
  
  console.log(user.role);
}

function getRoles(array) {

    for (let i = 0; i < array.length; i++) {
        const li = document.createElement('li'),
            a = document.createElement('a'),
            div = document.createElement('div')
            //user = array[i]
        let selectedUser;
        let user = array[0]
        if (user.firstName === firstEl) {
            selectedUser = user;
            printRole(selectedUser)

            a.innerText = user.firstName + ' ' + user.lastName
            a.addEventListener("click", printRole(user))
        }
    }
}

我第一次使用createElementHTML 元素，addEventListner并在某些时候添加。我知道我必须在某个时候申请li容器#ul，但我对自己做错了什么（也许是所有事情）感到非常困惑。我相信我正朝着正确的方向前进，但我似乎不知道如何以一种像样的（正确的）方式来表达它。

标签： javascripthtmlarraysdom

解决方案

你可以试试下面的代码。有什么不懂的可以自由提问。

let list = [
  { firstName: 'John', lastName: 'Doe', DOB: '01Jan1970', role: 'cook' },
  { firstName: 'Mary', lastName: 'Jane', DOB: '11Sep2000', role: 'server' },
];
const container = document.querySelector('#container');
function renderList(list){
  list.forEach(obj => {
    const li = document.createElement('li');
    const a = document.createElement('a');
    const div = document.createElement('div');
    
    a.innerHTML = `${obj.firstName} ${obj.lastName}`;
    div.innerHTML = obj.DOB;
    
    a.addEventListener('click', () => {
      console.log(obj.role)
    })
    li.appendChild(a);
    li.appendChild(div);
    container.appendChild(li)
  })
}
renderList(list);
<ul id="container">
</ul>

推荐阅读