How to amend contents of javascript array - possibly using forEach function

Question

I have a function that pushes information from my site's dataLayer into an array. I want to be able to then change the information in that array, but I am at a loss as to how to achieve this.

Here is an example of the data layer from my site's HTML:

 <script type="text/javascript"> var dataLayer = dataLayer || []; dataLayer.push({ 'transactionId': 'xxx', 'transactionAffiliation': 'xxx', 'transactionTotal': 27.95, 'transactionTax': 4.46, 'transactionGoodsNet': 18.49, 'transactionGoodsNetNoDiscount': 18.49, 'transactionGoodsTax': 3.51, 'transactionShipping': 5.95, 'transactionTotal_currency': 27.95, 'transactionTax_currency': 4.46, 'transactionGoodsNet_currency': 18.49, 'transactionGoodsNetNoDiscount_currency': 18.49, 'transactionGoodsTax_currency': 3.51, 'transactionShipping_currency': 5.95, 'transactionExchangeRate': 1.00, 'transactionProducts': [{ 'sku': 'sku1', 'name': 'name1', 'brand': 'Unbranded', 'category': 'xxxx', 'price': 6.00, 'price_ex': 5.04, 'image': 'xxx_image1.jpg', 'url': 'url1-p2180', 'quantity': 1 }, { 'sku': 'sku2', 'name': 'name2', 'brand': 'Unbranded', 'category': 'xxxx', 'price': 6.00, 'price_ex': 5.04, 'image': 'xxx_image2.jpg', 'url': 'url2-p2180', 'quantity': 1 }, { 'sku': 'sku3', 'name': 'name3', 'brand': 'Unbranded', 'category': 'xxxx', 'price': 5.00, 'price_ex': 4.20, 'image': 'xxx_image3.jpg', 'url': 'url3-p1448', 'quantity': 1 }, { 'sku': 'sku4', 'name': 'name4', 'brand': 'Unbranded', 'category': 'xxxx', 'price': 5.00, 'price_ex': 4.20, 'image': 'xxx_image4.jpg', 'url': 'url4-p1448', 'quantity': 1 }], 'transactionProductCount': 4, 'transactionDiscount': 0, 'transactionDiscountNet': 0, 'transactionDiscountTax': 0 }); </script> 

I created the following javascript function to loop through the transactionProducts array and push all of the url values into an array called productUrls :

 function getProductUrls() { var productUrls = [] var numberProducts = dataLayer[0].transactionProductCount for (var i = 0; i < numberProducts; i++) { productUrls.push(dataLayer[0].transactionProducts[i].url) } return productUrls } 

Now when I call the getProductUrls() function, it works as expected and pushes the values into the productUrls array as follows:

['url1-p2180','url2-p2180','url3-p1448', 'url4-p1448']

What I want to acheive is this array (preferably) - or a new array (if easier) - only containing the numbers that immediately follow the "-p" so as follows.

['2180','2180','1448','1448']

All of my product urls end with "-p" and then any number of digits.

I've thought about using a regular expression to replace the values productUrls.replace(/.+\\-p/g, '') , but it doesn't work and I suspect that replace only works with strings and not arrays.

I suspect using a forEach function to regex replace each item within the array would work, but I am failing miserably in all attempts to use that.

Any help would be greatly appreciated, as I am somewhat of a javascript novice.

Answer 1

You will normally use Array#map to remap your values to a new array:

productUrls.map(v=>v.replace(/.+\-p/,''))

an Array#forEach version will look like this:

processingUrls.forEach((v,i,a)=>a[i]=v.replace(/.+\-p/,''))

The callback arguments are as follows:

• v - is for current value
• i - is for value index
• a - an array forEach is being applied to (ie processingUrls )

thereby a[i]=... will replace the currently processed array element, with a new value.

Note that using map() is still preferable in most cases (for code style/safety reasons).

Answer 2

I suggest that you capture the pattern of numbers at the end. Try this instead :

function getProductUrls() {
   var productUrls = []
   var numberProducts = dataLayer[0].transactionProductCount
   for (var i = 0; i < numberProducts; i++) {
     var myRegexp = /url[0-9]+\-p([0-9]+)/g;
     url  = dataLayer[0].transactionProducts[i].url;
     var match = myRegexp.exec(url);
     productUrls.push(match[1])
   }
   return productUrls
}