Iterate over an array for each list item in JavaScript

Question

I'm working with an ecommerce page that I have no control over the HTML. I'm trying to add a price to every list item (swatch).

   // This is some hidden HTML being displayed on the page that has altered prices in it.

   const superAttributesRaw = [...document.querySelectorAll('.super-attribute-select option')];
   const superAttributes = superAttributesRaw.filter(newValue => Object.keys(newValue).length !== 0);

   // This is the shown HTML swatch I need to add the altered prices to.

   const swatchUl = [...document.querySelectorAll('.swatchesContainer ul li')];

   // Pulling out the altered prices and putting them into an array.

   prices = [];
   for (let value of superAttributes) {
       prices.push(value.config.price);
   }

   // This adds the sample text where I need it in the unordered list of swatches. I just need 'test' to be the altered prices.

   for (let value of swatchUl) {
       value.insertAdjacentHTML('beforeend', '<span>' + 'test' + '</span>');
   }

My prices array looks like:

prices = ["0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","-2","0","0","0","0","0","0","0"]

Where the "test" is in the 2nd for loop, I need that to somehow display the prices. I'm unsure how to have it iterate over every item in the price loop and display the 1st, 2nd, 3rd, etc.. in the correct order.

I tried nesting the for loops and it got all wonky. My terminology is pretty terrible if it wasn't obvious, so I'm having a hard time googling for exactly what I need. Any help is appreciated. Thanks!

does the array of swatches correspond to the array of prices? for example, are you trying to insert the first price in the price array into the first element in swatchUl? — Steve Archer
– Steve Archer, Commented Aug 14, 2018 at 18:17
@SteveArcher There is no mention of the price in the "swatchUl' array. If there was a way to add the prices array into the swatchUl array, it's possible I could get it to work in a different way. — user3330820
– user3330820, Commented Aug 14, 2018 at 18:21
What I think he meant by his question is; are the prices in your array in the same order as the elements in your swatchUl array? For example, is the 7th price in your price array supposed to be assigned to the 7th element in swatchUl? — Raptord
– Raptord, Commented Aug 14, 2018 at 18:23
@Raptord Sorry, yes the 7th price in the price array should be assigned to the 7th element in the swatchUI. — user3330820
– user3330820, Commented Aug 14, 2018 at 18:25

Steve Archer · Accepted Answer · 2018-08-14 18:39:28Z

5

If it's guaranteed that the indexes in the swatchUl array will correspond to the prices in your prices array, you could do:

swatchUl.forEach((swatch, index) => {
    swatch.insertAdjacentHTML('beforeend', '<span>' + prices[index] + '</span>');
})

edited Aug 14, 2018 at 18:39

answered Aug 14, 2018 at 18:27

Steve Archer

6514 silver badges10 bronze badges

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

1 Comment

Raptord Over a year ago

That's certainly more elegant than what I came up with ;)

Raptord · Accepted Answer · 2018-08-14 18:28:01Z

2

Since you've indicated in comments that the elements in both arrays are in the correct order, something like this, while maybe not the most elegant solution, should work.

var counter = 0;
for (let value of swatchUl) {
    value.insertAdjacentHTML('beforeend', '<span>' + prices[counter++] + '</span>');
}

answered Aug 14, 2018 at 18:28

Raptord

5033 silver badges8 bronze badges

Collectives™ on Stack Overflow

Iterate over an array for each list item in JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related