1

I'm trying to practice the state render view, where the state will determine where in the DOM an object is placed.

Basically, there are two HTML elements, both created in Javascript. Each will have classes .one and .two. There is also an array with two objects, with a slot property. The slot will determine which HTML element the names will be assigned to.

I tried looping through the state first, then nest a loop of the .name class. However when rendered, the first object is displayed first, when its slot is two; so ideally Tom appears in the second div.

I appreciate any input I could get. Thanks in advance!

Javascript

const body = document.querySelector('body');

const people = [
  {name: 'Tom', slot: 'two'},
  {name: 'Tim', slot: 'one'}
];

const createDiv = (arg) => {
  const div = document.createElement('div');

  div.classList.add('name', arg.slot);

  body.append(div);

  const namesClass = document.querySelectorAll('.name');

  people.forEach((ind)=>{
    namesClass.forEach((index)=>{
      if(index.classList.contains(ind.slot)){
        index.innerText = ind.name;
      };
    });
  });

  return div;
}

const render = () => {
  people.forEach(function(index){
    createDiv(index);
  });
}

render();
Improve this question
1
  • The . is not part of the class name, it is just a marker in CSS and queries. And contains() produces true/false result. Commented May 2, 2020 at 22:55

1 Answer 1

Reset to default
2

Your if condition seems to be wrong. It could look like this:

if(index.classList.contains(ind.slot)){
  index.innerText = ind.name;
}

Now you have another problem: the divs are not created in order. First, you are creating the div for slot two, and then the div for slot one. The texts are inserted correctly, however the slots are in the wrong order. If you change people to look like this, it should work again:

const people = [
  {name: 'Tim', slot: 'one'},
  {name: 'Tom', slot: 'two'}
];

If you want the elements to be sorted automatically, you can change your people array to use numbers for the slots. That way, you can sort them: 

var people = [
  {name: 'Tom', slot: 2},
  {name: 'Tim', slot: 1}
];

people.sort((personA, personB) => {
  return personA.slot - personB.slot
});

With those changes, your code should now work. Here's a working snippet:

const body = document.querySelector('body');

var people = [
  {name: 'Tom', slot: 2},
  {name: 'Tim', slot: 1}
];

people.sort((personA, personB) => {
  return personA.slot - personB.slot
});

const createDiv = (arg) => {
  const div = document.createElement('div');

  div.classList.add('name', arg.slot);

  body.append(div);

  const namesClass = document.querySelectorAll('.name');

  people.forEach((ind)=>{
    namesClass.forEach((index)=>{
      if(index.classList.contains(ind.slot)){
        index.innerText = ind.name;
      };
    });
  });

  return div;
}

const render = () => {
  people.forEach(function(index){
    createDiv(index);
  });
}

render();

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

6 Comments

Thank you, this works perfectly when the HTML is included. However, lets say the HTML elements are created in javascript. Would you have any insight to this? I've updated the code as well and removing the HTML. For some reason the if statement isn't working in this case. The divs do get created, but the names are in the wrong divs. Tom should be in the second, and Tim in the first.
It shouldn't make a difference if the elements are created with a script or included in an HTML file. Are you sure your code is generating the HTML elements correctly? This might be a different problem
Thanks for your response. I ran the code above in Codepen, and the divs do show up, but the names are in the wrong place. When I posted the original question, I thought that portion of the logic was the main problem. Your solution works, but only when the HTML elements are already present. But when the elements are created in Javascript, the if statement doesnt work. The names shows up in the order of the array, rather than by the slot.
That's because you are creating the divs according to the order of the array. If you want a different order, you should sort the array differently.
I've updated my answer again. Now, the elements are sorted automatically for you
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.