How to add multiple parameters to the URL at once

Question

Currently, if you add ?dc=bananas or ?dc=apples to the end of the URL, it shows that content, but how can I make it so that I can do up to 10? For example?dc=bananas+apples+oranges and it would show all content for the ID's added?

Also, is it possible to set it up so that I don't have a separate div for each one? Can this be done dynamically with one div checking for parameters in the URL?

HTML:

<div id="default-content" class="dynamic-content">
  This is the default content
</div>
<!-- Dynamic Section 1 -->
<div id="apples" class="dynamic-content">
  I like apples
</div>
<!-- Dynamic Section 2 -->
<div id="oranges" class="dynamic-content">
  I like oranges
</div>
<!-- Dynamic Section 3 -->
<div id="bananas" class="dynamic-content">
  I like bananas
</div>

CSS:

.dynamic-content {
    display:none;
}

JS:

(function($){
    // Parse the URL parameter
    function getParameterByName(name, url) {
        if (!url) {
            url = location.href.split("?dc=").slice(-1)[0];
        } 
        return url;
    }
    // Give the parameter a variable name
    var dynamicContent = getParameterByName('dc');
 
     $(document).ready(function() {
 
        // Check if the URL parameter is apples
        if (dynamicContent == 'apples') {
            $('#apples').show();
        } 
        // Check if the URL parameter is oranges
        else if (dynamicContent == 'oranges') {
            $('#oranges').show();
        } 
        // Check if the URL parameter is bananas
        else if (dynamicContent == 'bananas') {
            $('#bananas').show();
        } 
        // Check if the URL parmeter is empty or not defined, display default content
        else {
            $('#default-content').show();
        }
    });
})(jQuery);

Data:

const myProducts = [{
  "productCode": "ABC",
  "productNumber": "1467-6281",
  "Name": "Example Item",
  "Price": "1.975",
  "Quantity": "4"
},
{
  "productCode": "HJK",
  "productNumber": "1111-9809",
  "Name": "Example Item 2",
  "Price": "2.975",
  "Quantity": "14"
},
{
  "productCode": "AOP",
  "productNumber": "8792-3890",
  "Name": "Example Item 3",
  "Price": "3.975",
  "Quantity": "8"
}]

Answer 1

Side point: query-string library is great to convert a JS object to an url query string and get the raw query string to convert it to a JS object.

https://www.npmjs.com/package/query-string

Answer 2

You can have multiple parameters with the same name:

...?dc=bananas&dc=apples&dc=oranges

Which also allows you to easily create a div for each one:

// Use the URLSearchParams interface to get an array of
// all values for the parameter you want to query.
const urlParams = new URLSearchParams(window.location.search);
let dynamicContent = urlParams.getAll('dc');

// For each value in the array, create and insert
// a new element.
for (let dc of dynamicContent)
{
    let newSection = document.createElement('div');
    newSection.id = dc;
    newSection.classList.add('dynamic-content');
    newSection.innerText = 'I like ' + dc;
    document.body.appendChild(newSection);
}

// Show or hide the default depending on if values exist.
if (dynamicContent.length) {
    document.querySelector('.default-content').style.display = 'none';
}
else {
    document.querySelector('.default-content').style.display = 'block';
}

The URLSearchParams interface is widely supported outside of Internet Explorer.

Answer 3

(function($) {

  // Parse the URL parameter
  function getParameterByName(name, url) {
    return url ?? location.href.split(`?${name}=`)[1];
  }

  $(document).ready(function() {
    const keys = getParameterByName('dc')?.split('+');
    let dynamicContent;

    // For each entry, check whether it correspondents to a div

    if (keys)
      keys.forEach(key => {
        if (key == 'apples')
          dynamicContent = $('#apples');
        else if (key == 'oranges')
          dynamicContent = $('#oranges');
        else if (key == 'bananas')
          dynamicContent = $('#bananas');
        if (dynamicContent)
          dynamicContent.show();
      });

    // If during the entire loop no element has been found, show the default one

    if (!dynamicContent)
      $('#default-content').show();
  })
})(jQuery);