CODEWITHSUNDEEP
javascriptarrays
Ajit Kumar
Ajit Kumar

Reputation: 417

Query Selector To Array

I am having this html page ( inside the body tag ) ->

<div class="todo-container">
  <ul class="todo-list">
    <div class="todo">
      <li>Iteasm</li>
    </div>
    <div class="todo">
      <li>Iteasm</li>
    </div>
    <div class="todo">
      <li>Iteasm</li>
    </div>
    <div class="todo">
      <li>Item</li>
    </div>
    <div class="todo">
      <li>Item</li>
    </div>
    <div class="todo">
      <li>Item</li>
    </div>
    <div class="todo">
      <li>Item</li>
    </div>
  </ul>
</div>

I am trying to querySelect the .todo-list and want to convert the innerText to array.. I tried the what is told here but is not working->

const nodelist = document.querySelector('.todo-list').innerText;
const nodelistToArray = Array.prototype.slice.call(nodelist);
console.log(nodelistToArray);

But I am getting this in the console ->

["I", "t", "e", "a", "s", "m", "↵", "I", "t", "e", "a", "s", "m", "↵", "I", "t", "e", "a", "s", "m", "↵", "I", "t", "e", "m", "↵", "I", "t", "e", "m", "↵", "I", "t", "e", "m", "↵", "I", "t", "e", "m"]

Actually I want something like this ->

["Iteasm", "Iteasm", "Iteasm"]

Any idea ?? Thanks !!!

Upvotes: 0

Views: 2119

Answers (2)

D. Seah
D. Seah

Reputation: 4592

you can also do this

const items = [...document.getElementsByClassName("todo")].map(li => li.innerText);
console.log(items);

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 371203

Use querySelectorAll instead, and Array.from:

console.log(
  Array.from(
    document.querySelectorAll('.todo > li'),
    li => li.textContent
  )
);
<div class="todo-container">
  <ul class="todo-list">
    <div class="todo">
      <li>Iteasm</li>
    </div>
    <div class="todo">
      <li>Iteasm</li>
    </div>
    <div class="todo">
      <li>Iteasm</li>
    </div>
    <div class="todo">
      <li>Item</li>
    </div>
    <div class="todo">
      <li>Item</li>
    </div>
    <div class="todo">
      <li>Item</li>
    </div>
    <div class="todo">
      <li>Item</li>
    </div>
  </ul>
</div>

Upvotes: 2

Related Questions