数组到 HTML 元素并附加到 ul

Question

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

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))
        }
    }
}

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

Answer 1

试试这样：

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

getRoles(names);

function getRoles(array) {
  const container = document.getElementById('container');

  for (let i = 0; i < array.length; i++) {
    const li = document.createElement('li'),
      a = document.createElement('a'),
      div = document.createElement('div')

    let user = array[i];

    a.innerText = user.firstName + ' ' + user.lastName;
    a.className = 'name';
    a.addEventListener('click', function() {
      printRole(user);
    });

    div.className = 'age';
    div.innerText = getAge(user.DOB.substr(0,2) + ' ' + user.DOB.substr(2,3) + ' ' + user.DOB.substr(5));

    li.appendChild(a);
    li.appendChild(div);
    container.appendChild(li);
  }
}

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

//getAge function from: https://stackoverflow.com/questions/10008050/get-age-from-birthdate
function getAge(dateString) {
  var today = new Date();
  var birthDate = new Date(dateString);
  var age = today.getFullYear() - birthDate.getFullYear();
  var m = today.getMonth() - birthDate.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  return age;
}

<ul id="container"></ul>

创建的元素需要一起添加并添加为#container 的子元素。在事件侦听器函数中，使用特定参数 (user) 调用 printRole 需要包装在 addEventListener callback function 中。

Answer 2

你可以试试下面的代码。有什么不懂的可以随便问。

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>