array to HTML elements and append to ul

Question

when a given array includes a list of employees

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

and #ul is already provided,

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

I need to make it so that it returns employee's role when the name is clicked, and here is my code:

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

I first used createElement into HTML elements, added addEventListner on and at some point. I know I have to apply li to the #ul container at some point but I am very much confused as to what I am doing wrong (perhaps everything). I believe I am going in the right direction but I don't seem to figure out how to put it in a presentable (proper) way.

You can try to add event listener like this. `a.addEventListener("click", () => printRole(user))` because `addEventListener` needs a callback function. — ChalanaN, Nov 23 '20 at 08:44

score 2 · Answer 1 · answered Nov 23 '20 at 08:41

You can try the below code. If you don't understand anything you can freely ask.

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>

thank you but I cannot change the name of the ```function getRoles(array) ```though, — Emily Scone, Nov 23 '20 at 08:43
```AssertionError: expected 'Joe Blow' to equal 'Joe Blow'``` I get this error message which appears that I need to add a class on a? — Emily Scone, Nov 23 '20 at 08:56

sbgib · Answer 2 · 2020-11-23T09:01:53.053

Try like this:

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>

The created elements need to be added together and added as children of #container. In the event listener function, calling printRole with a specific argument (user) would need to be wrapped in the addEventListener callback function.

thank you for your time. just one thing though, ```AssertionError: expected '' to equal 'John Doe '``` Could you kindly guide me through why I get this error? — Emily Scone, Nov 23 '20 at 09:06
On which line are you getting that error? I think we need more information to be sure why that's happening. — sbgib, Nov 24 '20 at 10:18

array to HTML elements and append to ul

2 Answers2