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
– ChalanaN, Commented Nov 23, 2020 at 8:44

Maheer Ali · Accepted Answer · 2020-11-23 08:41:21Z

2

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>

answered Nov 23, 2020 at 8:41

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

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

2 Comments

Emily Scone Over a year ago

thank you but I cannot change the name of the function getRoles(array) though,

Emily Scone Over a year ago

AssertionError: expected '<a>Joe Blow</a>' to equal '<a class="name">Joe Blow</a>' I get this error message which appears that I need to add a class on a?

sbgib · Accepted Answer · 2020-11-23 09:01:53Z

0

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.

edited Nov 23, 2020 at 9:01

answered Nov 23, 2020 at 8:55

sbgib

5,8583 gold badges22 silver badges27 bronze badges

2 Comments

Emily Scone Over a year ago

thank you for your time. just one thing though, AssertionError: expected '<a class="name"></a>' to equal '<a class="name">John Doe </a>' Could you kindly guide me through why I get this error?

sbgib Over a year ago

On which line are you getting that error? I think we need more information to be sure why that's happening.

Collectives™ on Stack Overflow

array to HTML elements and append to ul

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related