Search code examples
jqueryurlurl-parameters

Fetch url parameter from multiple links and combine them into one url


I'm trying to combine multiple URLs parameters under one joined link. Console log registers all of the parameters, my issue is that stored value is overwritten and only last value is being printed as well as the number of printed parameters is not matching to the actual amount of URLs. I've included code below:

$('a[ href *= "amazon" ]').each(function () {
    var href = $(this).attr('href');
    var re = /([A-Z0-9]{10})(|\?|\b)/i;

    var asin = re.exec(href)[1];
  
    var asinList = $('#output');
    asinList.text(asin);

    // if (!asin) {
    //   return;
    // }

    console.log('ASIN', asin);

    var result = '';
    for (var i = 0; i < asin.length; i++) {
      result += "&ASIN." + (i + 1) + "=" + asin;
    }

    var printLink = $('.buy-all');
    printLink.text(result);
  });
a { 
  color: black;
}

ol ul { 
  list-style-type: none;
  margin-left: 0;
}

ol ul li { 
  display: inline-block;
}

ol ul li:first-child { 
  margin-right: 10px;
}

.button { 
  background: grey;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol>
  <li>
    <ul>
      <li> <a href="https://www.amazon.co.uk/gp/product/B07DN8T78N/ref=as_li_qf_asin_il_tl?ie=UTF8&amp;tag=amzfoodilem02-21&amp;creative=6738&amp;linkCode=as2&amp;creativeASIN=B07DN8T78N&amp;linkId=5d03f48f9907b98183f7bc4688b7610c" title="Smithcraft 18/8 Stainless Steel Measuring Spoons">Smithcraft 18/8 Stainless Steel Measuring Spoons[B07DN8T78N]</a></li>
      <li class="product-qty">1</li>
    </ul>
  </li>
  <li>
    <ul>
      <li> <a href="https://www.amazon.co.uk/gp/product/B000KGALJE/ref=as_li_tl?ie=UTF8&amp;tag=amzfoodilemma02-21&amp;camp=1634&amp;creative=6738&amp;linkCode=as2&amp;creativeASIN=B000KGALJE&amp;linkId=129ff313793555b5a820d44e105337dd" title="Pyrex glass measuring jug">Pyrex glass measuring jug[B000KGALJE]</a></li>
      <li class="product-qty">1</li>
    </ul>
  </li>
  <li>
    <ul>
      <li> <a href="https://www.amazon.co.uk/gp/product/B07PWY978F/ref=as_li_qf_asin_il_tl?ie=UTF8&amp;tag=amzfoodilem02-21&amp;creative=6738&amp;linkCode=as2&amp;creativeASIN=B07PWY978F&amp;linkId=0e58e0c90267230f6c3410c7a9d00e73" title="Stainless Steel Healthy Ceramic Nonstick Light Gray Saucepan">Stainless Steel Healthy Ceramic Nonstick Light Gray Saucepan[B07PWY978F]</a></li>
      <li class="product-qty">1</li>
    </ul>
  </li>
  <li>
    <ul>
      <li> <a href="https://www.amazon.co.uk/gp/product/B0822VW6JL/ref=as_li_qf_asin_il_tl?ie=UTF8&amp;tag=amzfoodilem02-21&amp;creative=6738&amp;linkCode=as2&amp;creativeASIN=B0822VW6JL&amp;linkId=e3ac2b057458cea023b1049482f5cefd" title="Britten and James Mason Glass ‘Fresh’ 490ml Preserving Jars">Britten and James Mason Glass ‘Fresh’ 490ml Preserving Jars[B0822VW6JL]</a></li>
      <li class="product-qty">1</li>
    </ul>
  </li>
</ol>

<div class="text-center"> <a class="button buy-all" href="" target="_blank" title="Buy ingredients"></a></div>

<p>ASIN list: </p>
<p id="output"></p>


Solution

  • As for only printing that last value, when you call text() every iteration then it overwrites whatever was previously in that element.

    Following simplifies both reading existing params and generating combined ones by using URLSearchParams() API. It also generates an array of the values that are easily inserted in the <p> using join()

    const combinedParams = new URLSearchParams()
    
    const asinArr = $('a[ href *= "amazon" ]').map(function(i){
        const asin = (new URLSearchParams(this.search)).get('creativeASIN');
        combinedParams.append('ASIN.' +(i+1), asin)
        return asin
    
    }).get()
    
    $('#output').html(asinArr.join('<br>'));
    $('.buy-all').text(combinedParams.toString())
    
    console.log('Array:', JSON.stringify(asinArr));
    
    console.log('combined:', combinedParams.toString())
    a { 
      color: black;
    }
    
    ol ul { 
      list-style-type: none;
      margin-left: 0;
    }
    
    ol ul li { 
      display: inline-block;
    }
    
    ol ul li:first-child { 
      margin-right: 10px;
    }
    
    .button { 
      background: grey;
      padding: 10px 20px;
      color: white;
      text-decoration: none;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <ol>
      <li>
        <ul>
          <li> <a href="https://www.amazon.co.uk/gp/product/B07DN8T78N/ref=as_li_qf_asin_il_tl?ie=UTF8&amp;tag=amzfoodilem02-21&amp;creative=6738&amp;linkCode=as2&amp;creativeASIN=B07DN8T78N&amp;linkId=5d03f48f9907b98183f7bc4688b7610c" title="Smithcraft 18/8 Stainless Steel Measuring Spoons">Smithcraft 18/8 Stainless Steel Measuring Spoons[B07DN8T78N]</a></li>
          <li class="product-qty">1</li>
        </ul>
      </li>
      <li>
        <ul>
          <li> <a href="https://www.amazon.co.uk/gp/product/B000KGALJE/ref=as_li_tl?ie=UTF8&amp;tag=amzfoodilemma02-21&amp;camp=1634&amp;creative=6738&amp;linkCode=as2&amp;creativeASIN=B000KGALJE&amp;linkId=129ff313793555b5a820d44e105337dd" title="Pyrex glass measuring jug">Pyrex glass measuring jug[B000KGALJE]</a></li>
          <li class="product-qty">1</li>
        </ul>
      </li>
      <li>
        <ul>
          <li> <a href="https://www.amazon.co.uk/gp/product/B07PWY978F/ref=as_li_qf_asin_il_tl?ie=UTF8&amp;tag=amzfoodilem02-21&amp;creative=6738&amp;linkCode=as2&amp;creativeASIN=B07PWY978F&amp;linkId=0e58e0c90267230f6c3410c7a9d00e73" title="Stainless Steel Healthy Ceramic Nonstick Light Gray Saucepan">Stainless Steel Healthy Ceramic Nonstick Light Gray Saucepan[B07PWY978F]</a></li>
          <li class="product-qty">1</li>
        </ul>
      </li>
      <li>
        <ul>
          <li> <a href="https://www.amazon.co.uk/gp/product/B0822VW6JL/ref=as_li_qf_asin_il_tl?ie=UTF8&amp;tag=amzfoodilem02-21&amp;creative=6738&amp;linkCode=as2&amp;creativeASIN=B0822VW6JL&amp;linkId=e3ac2b057458cea023b1049482f5cefd" title="Britten and James Mason Glass ‘Fresh’ 490ml Preserving Jars">Britten and James Mason Glass ‘Fresh’ 490ml Preserving Jars[B0822VW6JL]</a></li>
          <li class="product-qty">1</li>
        </ul>
      </li>
    </ol>
    
    <div class="text-center"> <a class="button buy-all" href="" target="_blank" title="Buy ingredients"></a></div>
    
    <p>ASIN list: </p>
    <p id="output"></p>