Formatting Array made from html classes

Question

I have been working on implementing a review system into my website and am stuck at this point:

I take all the product SKUs which are only accessible from the Cart page like such:

<span class="ProdSkus">SKU1</span>
<span class="ProdSkus">SKU2</span>
<span class="ProdSkus">SKU3</span>

I'm combining these into an array with this:

var combinedText = $('.ProdSkus').text();

When I log it I get this result:

SKU1SKU2SKU3

I need to format it to be as such:

["SKU1", "SKU2", ...]

Any help is appreciated!

This has to be done from the cart page, stored locally, and then used after the customer has made the purchase. I have been doing this like such:

localStorage.setItem("SKUS", combinedText);

You can't store an array in localStorage, you need to convert it to JSON. — Barmar
– Barmar, Commented Feb 22, 2017 at 19:17

Barmar · Accepted Answer · 2017-02-22 19:23:29Z

2

Use .map():

var combinedText = $('.ProdSkus').map(function() {
    return $(this).text();
}).get();

.map() returns a jQuery collection of the return values (strings in this case), and .get() converts it to an array.

edited Feb 22, 2017 at 19:23

answered Feb 22, 2017 at 19:15

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

1 Comment

Scott Marcus Over a year ago

Clarification: The JQuery version of map() returns a JQuery object containing whatever you tell it to contain. In this case, the text of the elments (strings).

Scott Marcus · Accepted Answer · 2017-02-22 20:02:52Z

0

You can iterate the set of elements and add each value to an array:

var combinedText = [];  // This is where the results will go

// Loop over the matched elements
$('.ProdSkus').each(function(){
  // Add the text of each span to the array
  combinedText.push(this.textContent);
});

// Test the result
console.log(combinedText);

// And, to store the values in localStorage,
// you'd need to convert the array into a string
// This will throw an error here in Stack Overflow because
// their snippet environment doesn't allow it, but the code is correct:
localStorage.setItem("combinedText", JSON.stringify(combinedText));

// Then, when/where you want the data back out of localStorage, you'd write
var gottenData = localStorage.getItem("combinedText");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="ProdSkus">SKU1</span>
<span class="ProdSkus">SKU2</span>
<span class="ProdSkus">SKU3</span>

edited Feb 22, 2017 at 20:02

answered Feb 22, 2017 at 19:15

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

4 Comments

Matt Over a year ago

This works great! It's formatted exactly as needed. Thank you!

Scott Marcus Over a year ago

@Matt You're welcome. Don't forget to up vote all the helpful answers and mark one (maybe this one?) as your answer.

Matt Over a year ago

Apparently I cannot do that as of yet, ha. Need 15 rep, but I have upvoted these! Now my next task is to convert it to be stored in local storage, I think stringify does this?

Scott Marcus Over a year ago

@Matt All you'd need to do is localStorage.setItem("combinedText", JSON.stringify(combinedText));

kind user · Accepted Answer · 2017-02-22 19:18:11Z

0

Pure JS solution (no jQuery).

var elems = document.getElementsByClassName('ProdSkus');
var arr = [];
Array.from(elems).forEach(v => arr.push(v.innerHTML));

console.log(arr);

<span class="ProdSkus">SKU1</span>
<span class="ProdSkus">SKU2</span>
<span class="ProdSkus">SKU3</span>

answered Feb 22, 2017 at 19:18

kind user

42k8 gold badges69 silver badges78 bronze badges

Comments

Matt Spinks · Accepted Answer · 2017-02-22 19:19:03Z

0

Try using each:

var combinedText = [];
$('.ProdSkus').each(function(k,v) {
    combinedText.push(v.text());
});
console.log(combinedText);

edited Feb 22, 2017 at 19:19

answered Feb 22, 2017 at 19:17

Matt Spinks

6,7404 gold badges32 silver badges57 bronze badges

1 Comment

Barmar Over a year ago

v is the element, not its text.

Collectives™ on Stack Overflow

Formatting Array made from html classes

4 Answers 4

1 Comment

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related