How add items from html <span> to an array in JavaScript?

Question

I want make an array that contains all of the text from the span elements that have the shopping-item class. My attempts to do so have resulted in either the array containing [Object object] or [object HTMLSpanElement]. I just want the text which that span element contains, nothing else.

I've tried this implementation and others from Stack. I've tried using the map method, currently I tried using the toArray method in an effort to view what was being stored inside of the array. Some of the code I have tried is below.

<div class="container">
  <h1>Shopping List</h1>

  <form id="js-shopping-list-form">
    <label for="shopping-list-entry">Add an item</label>
    <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
    <button type="submit">Add item</button>
  </form>

  <ul class="shopping-list">
    <li>
      <span class="shopping-item">apples</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
        <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
      </div>
    </li>
    <li>
      <span class="shopping-item">oranges</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
        <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
      </div>
    </li>
    <li>
      <span class="shopping-item shopping-item__checked">milk</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
        <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
      </div>
    </li>

//Here are some of my attempts for context.

//1ST attempt
const list = $('span.shopping-item').toArray();
for (prop in list) {
  alert(`${prop} = ${list[prop]}`);
}

//another attempt
let data = $('li').children('span.shopping-item').map(function() {
  return {
    item: $(this).text()
  };
}).get();

//another attempt
const list = ('ul.shopping-list').children('span.shopping-item').map(function(item) {
  return item;
});

I expect an output of:

['apples', 'oranges', 'milk', 'bread']

When I display the list with alert(). However, this is what I get [Object object], [object HTMLSpanElement] or sometimes just a whole list full of [Object object]

Pointy · Accepted Answer · 2019-08-07 14:34:59Z

2

Your second example is almost there, you just need to return the text() directly; there's no need to place it in the property of an object:

let data = $('li').children('span.shopping-item').map(function() {
  return $(this).text();
}).get();
console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h1>Shopping List</h1>

  <form id="js-shopping-list-form">
    <label for="shopping-list-entry">Add an item</label>
    <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
    <button type="submit">Add item</button>
  </form>

  <ul class="shopping-list">
    <li>
      <span class="shopping-item">apples</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
        <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
      </div>
    </li>
    <li>
      <span class="shopping-item">oranges</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
        <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
      </div>
    </li>
    <li>
      <span class="shopping-item shopping-item__checked">milk</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
        <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
      </div>
    </li>
  </ul>
</div>

edited Aug 7, 2019 at 14:34

Pointy

415k62 gold badges600 silver badges631 bronze badges

answered Aug 7, 2019 at 14:27

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

4 Comments

Ronit Mukherjee Over a year ago

@Pointy - Do we really need "$('li').children('span.shopping-item')" as this will make the selection very closed-ended. Hence let's keep it as "$('.shopping-item')"

Rory McCrossan Over a year ago

@RonitMukherjee I assume the OP left that restriction in for a reason.

Ronit Mukherjee Over a year ago

Closed-ended selectors are not good as they are very dependent on HTML structure, change in structure will stop the code.

Rory McCrossan Over a year ago

In some cases they are required. We don't know enough about the use case here to advise either way.

Adedoyin Akande · Accepted Answer · 2019-08-07 14:43:36Z

1

Here is a short solution

let spanArray = [];
document.querySelectorAll('span').forEach(element => {
    spanArray.push(element.innerHTML);
});

console.log(spanArray);

answered Aug 7, 2019 at 14:43

Adedoyin Akande

2,6091 gold badge21 silver badges23 bronze badges

Comments

StefanN · Accepted Answer · 2019-08-07 14:30:47Z

Here is the Vanilla JavaScript solution, which makes use of the document.querySelectorAll method:

const list = [];
document.querySelectorAll('.shopping-item').forEach(item => list.push(item.innerText));

console.log(list); // ['apples', 'oranges', 'milk']

<div class="container">
  <h1>Shopping List</h1>

  <form id="js-shopping-list-form">
    <label for="shopping-list-entry">Add an item</label>
    <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
    <button type="submit">Add item</button>
  </form>

  <ul class="shopping-list">
    <li>
      <span class="shopping-item">apples</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle">
          <span class="button-label">check</span>
        </button>
        <button class="shopping-item-delete">
          <span class="button-label">delete</span>
        </button>
      </div>
    </li>
    <li>
      <span class="shopping-item">oranges</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle">
          <span class="button-label">check</span>
        </button>
        <button class="shopping-item-delete">
          <span class="button-label">delete</span>
        </button>
      </div>
    </li>
    <li>
      <span class="shopping-item shopping-item__checked">milk</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle">
          <span class="button-label">check</span>
        </button>
        <button class="shopping-item-delete">
          <span class="button-label">delete</span>
        </button>
      </div>
    </li>
  </ul>
</div>

Abhishek Sahu · Accepted Answer · 2019-08-07 14:45:01Z

0

Try this :

var lists = $('.shopping-item');
var list_array=[];
lists.each(function(){
    list_array.push($(this).text());
});
console.log(list_array);

answered Aug 7, 2019 at 14:45

Abhishek Sahu

515 bronze badges

Comments

akram · Accepted Answer · 2019-08-07 15:33:45Z

0

let allItem = [];
$('li span.shopping-item').each(function(){
    allItem.push($(this).text());
});
console.log(allItem);

answered Aug 7, 2019 at 15:33

akram

11 bronze badge

1 Comment

Richard-Degenne Over a year ago

Please don't just post some snippet of code as an answer. At least demonstrate how it solves the problem in the answer itself.

Collectives™ on Stack Overflow

How add items from html <span> to an array in JavaScript?

5 Answers 5

4 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related