Customer List Challenge (TestDome)

Question

I'm trying to solve this challenge from TestDome and i need some help. I dont really understand how i must toggle the email and how to append the item to DOM... !!Please without Vanilla JS only!!

Implement the showCustomers function so that it renders customers as list items. The first argument to the function, customers, is an array of objects with the name and email properties. The second argument to the function, targetList, is an unordered HTML list to which each customer should be added as a separate list item.

The name and email properties should be added as two paragraphs inside the list item. At first, the email paragraph element should not be present in the DOM. The email paragraph element should be added to the DOM after the name is clicked, and it should be removed from the DOM when the name is clicked again.

For example, the following code:

document.body.innerHTML = `
<div>
  <ul id="customers">
  </ul>
</div>
`;
let customers = [{name: "John", email: "john@example.com"},
                 {name: "Mary", email: "mary@example.com"}];
showCustomers(customers, document.getElementById("customers"));

let customerParagraph = document.querySelectorAll("li > p")[0];
if(customerParagraph) {
  customerParagraph.click();
}
console.log(document.body.innerHTML);
Should render:

<div>
  <ul id="customers">
    <li>
      <p>John</p>
      <p>john@example.com</p>
    </li>
    <li>
      <p>Mary</p>
    </li>
  </ul>
</div>

THIS IS MY CODE

function showCustomers(customers, targetList) {
 customers.forEach(item =>{
  let res = `<li>
        <p> ${item.name}</p>;
        <p> ${item.email}</p>;
        </li>;
  targetList.innerHTML = targetList.appendChild(res);
   
 })
}

https://www.testdome.com/questions/javascript/customer-list/49798?visibility=3&skillId=2

score 0 · Answer 1 · answered Jan 19 '22 at 17:12

Replace the line

targetList.innerHTML = targetList.appendChild(res);

with

targetList.innerHTML += res;.

You basically have two ways for adding elements:

increasing innerHTML contents with raw strings
appending children to DOM element

In your case res is a string so you can't use targetList.appendChild

score 0 · Answer 2 · answered Oct 29 '22 at 20:38

Since you asked : 'The email paragraph element should be added to the DOM after the name is clicked, and it should be removed from the DOM when the name is clicked again'.

create list el,create p el, create event listener on p el, append email to a child element

Replace your code to

customers.forEach((item) => {
    const li = document.createElement("li");
    const name = document.createElement("p");
    name.textContent = item.name;
    name.style.cursor = "pointer";
    name.addEventListener("click", (event) => {
      const parent = event.target.parentElement;
      if (parent.children.length == 1) {
        const email = document.createElement("p");
        email.textContent = item.email;
        parent.appendChild(email);
      } else {
        parent.lastChild.remove();
      }
    });
    li.appendChild(name);
    targetList.appendChild(li);
  });

score 0 · Answer 3 · answered Jan 07 '23 at 18:46

function showCustomers(customers, targetList) {
  customers.forEach((customer, index) => {
  const node = document.createElement('li');
  let nameEl = document.createElement('p');
  let emailEl = document.createElement('p');
  nameEl.innerText = customer.name;
  emailEl.innerText = customer.email;
  node.appendChild(nameEl);
  nameEl.addEventListener('click', function() {
    node.contains(emailEl) ? node.removeChild(emailEl)  : 
  node.appendChild(emailEl);
 });
 targetList.appendChild(node)
});
}

Customer List Challenge (TestDome)

3 Answers3