JavaScript: Replace list from array by clicking next

Question

How can I replace the whole list without adding new li's to the list?

I think I should "reboot" it somehow, but I'm not sure how. I could just do it by filling empty li's in the HTML file, but then I'll have a problem when there are more or less items.

let objects = [
  {
    "id": 1,
    "name": "broom",
    "places": ["kitchen", "shop", "pharmacy"]
  },
  {
    "id": 2,
    "name": "wheels",
    "places": ["park", "pool", "square"]
  },
  {
    "id": 3,
    "name": "wood",
    "places": ["church", "garage", "bathroom"]
  }
];

const nameObject = document.getElementById('objectName');
const nextBtn = document.getElementById('objectNext');
let objectIndex = 0;

nextBtn.onclick = function () {
  objectIndex === objects.length - 1 ?
    objectIndex = 0 :
    objectIndex ++;
  nameObject.innerHTML = objects[objectIndex].name;
  objects[objectIndex].places.forEach(place => {
    createPlaceListItem(place);
  });
};

const createPlaceListItem = place => {
  const $item = document.createElement(`li`);
  $item.classList.add(`objectListItem`);
  $item.innerHTML = place;
  document.getElementById(`placeList`).appendChild($item);
};

nameObject.innerHTML = objects[objectIndex].name;
objects[objectIndex].places.forEach(place => {
  createPlaceListItem(place);
});

<h4 id="objectName" class="objectName"></h4>
<ul class="objectList" id="placeList">
</ul>

<button class="objectNext" id="objectNext">next</button>

Thanks!

Da Mahdi03 · Accepted Answer · 2021-01-17 23:00:32Z

3

Try using innerHTML to clean up the list before you append your new items

In your onclick you can reset your list

nextBtn.onclick = function () {
  document.getElementById(`placeList`).innerHTML = ""; //Clear the list before you append new values to it
  objectIndex === objects.length - 1 ?
    objectIndex = 0 :
    objectIndex ++;
  nameObject.innerHTML = objects[objectIndex].name;
  objects[objectIndex].places.forEach(place => {
    createPlaceListItem(place);
  });
};

answered Jan 17, 2021 at 23:00

Da Mahdi03

1,6081 gold badge12 silver badges19 bronze badges

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

Comments

Gerardo Furtado · Accepted Answer · 2021-01-17 23:47:20Z

2

While using innerHTML to clean the list is effective, using a proper removeChild is not only arguably more idiomatic but also faster (although the performance will not matter for such small lists). It can be just:

while (list.firstChild) list.removeChild(list.firstChild);

Here is your code with that line:

let objects = [{
    "id": 1,
    "name": "broom",
    "places": ["kitchen", "shop", "pharmacy"]
  },
  {
    "id": 2,
    "name": "wheels",
    "places": ["park", "pool", "square"]
  },
  {
    "id": 3,
    "name": "wood",
    "places": ["church", "garage", "bathroom"]
  }
];

const nameObject = document.getElementById('objectName');
const nextBtn = document.getElementById('objectNext');
const list = document.getElementById(`placeList`);
let objectIndex = 0;

nextBtn.onclick = function() {
  objectIndex === objects.length - 1 ?
    objectIndex = 0 :
    objectIndex++;
  nameObject.innerHTML = objects[objectIndex].name;
  while (list.firstChild) list.removeChild(list.firstChild);
  objects[objectIndex].places.forEach(place => {
    createPlaceListItem(place);
  });
};

const createPlaceListItem = place => {
  const $item = document.createElement(`li`);
  $item.classList.add(`objectListItem`);
  $item.innerHTML = place;
  list.appendChild($item);
};

nameObject.innerHTML = objects[objectIndex].name;
objects[objectIndex].places.forEach(place => {
  createPlaceListItem(place);
});

<h4 id="objectName" class="objectName"></h4>
<ul class="objectList" id="placeList">
</ul>

<button class="objectNext" id="objectNext">next</button>

edited Jan 17, 2021 at 23:47

answered Jan 17, 2021 at 23:05

Gerardo Furtado

102k9 gold badges128 silver badges178 bronze badges

3 Comments

Da Mahdi03 Over a year ago

Just out of curiosity, how is a removeChild faster than .innerHTML if you were to have a really long list of items? Wouldn't it make sense to just delete the entire innerHTML instead of removing each child one by one?

Gerardo Furtado Over a year ago

@DaMahdi03 I understand that it's counterintuitive, but see it by yourself: measurethat.net/Benchmarks/Show/34/0/innerhtml-vs-removechild

Jari Over a year ago

Thanks for the info! This does indeed seem to be the proper way.

Marko · Accepted Answer · 2021-01-17 23:05:56Z

0

If you want to 'reboot' just add this to the start of the onClick function

document.getElementById(`placeList`).innerHTML = '';

answered Jan 17, 2021 at 23:05

Marko

686 bronze badges

Collectives™ on Stack Overflow

JavaScript: Replace list from array by clicking next

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related