CODEWITHSUNDEEP
javascriptruby-on-rails
Ben
Ben

Reputation: 712

How to check params before to add them to an url

I need to store params values in localStorage :

<script>
let searchParams = new URLSearchParams(window.location.search);

localStorage.setItem('from', searchParams.get('from'));
localStorage.setItem('page', searchParams.get('page'));
localStorage.setItem('distance',searchParams.get('distance'));

function addParameter() {
  document.getElementById('nav-bottom-back').removeAttribute("href");
  window.location = '<%= url_for(way_sleeps_path(params[:way_id])) %>?from=' + localStorage.getItem('from') + '&distance=' + localStorage.getItem('distance') + '&page=' + localStorage.getItem('page');
}
</script>

When one or more params are empty or not present, my function addParameter return for example : `?from=null&distance=null&page=2 an I get an error.

How can I check if localStorage return not empty or null values and add them to the url ?

**I've updated my script as suggested by York **

function addParameter() {
  document.getElementById('nav-bottom-back').removeAttribute("href");
  window.location = '<%= url_for(way_sleeps_path(params[:way_id])) %>?from=' + (localStorage.getItem('from') || '')  + '&distance=' + (localStorage.getItem('distance')  || '') + '&page=' + (localStorage.getItem('page') || '');
}

but

In localStorage, I get 3 values : page, from & distance

but my function return a wrong url :

?from=112&distance=1 without page params

If my url is without params, my function return :

?from=null&distance=null

Upvotes: 0

Views: 128

Answers (2)

Ben Stephens
Ben Stephens

Reputation: 3371

Maybe something like (not sure whether you need encodeURIComponent, and not tested):

function addParameter() {
  document.getElementById('nav-bottom-back').removeAttribute("href");
  
  const base_url = '<%= url_for(way_sleeps_path(params[:way_id])) %>';
  const param_string = ['from', 'distance', 'page']
    .map((key) => localStorage.getItem(key) ?
        [key, encodeURIComponent(localStorage.getItem(key))] :
        null
     )
    .filter((item) => item)
    .map((item) => item.join('='))
    .join('&');
  
  window.location = base_url + (param_string ? '?' + param_string : '');
}

With defaults:

const params_defaults = {
  from: 2,
  page: 1,
  distance: null,
};

// uncomment this and remove test_ls and the other ls_result_for_key_or_default
// const ls_result_for_key_or_default = (key, default_value) =>
//  localStorage.getItem(key) ? localStorage.getItem(key) : default_value;

const test_ls = {
  from: null,
  page: 3,
};

const ls_result_for_key_or_default = (key, default_value) =>
  test_ls[key] ? test_ls[key] : default_value;

const params_object_from_ls_with_defaults = (defaults) =>
  Object.fromEntries(
    Object.entries(defaults).map(
      ([key, default_value]) => [key, ls_result_for_key_or_default(key, default_value)]
    ).filter((entry) => entry[1])
  );

const params_string_for_object = (params) =>
  Object.entries(params)
    .map(([key, value]) => key + '=' + encodeURIComponent(value))
    .join('&');

const append_params_string_to_url = (url) => (params_string) => 
  url + (params_string ? '?' + params_string : '')

// assumes there aren't already params in the URL
const add_stored_params_to_url = (url) =>
  append_params_string_to_url(url)(
    params_string_for_object(
      params_object_from_ls_with_defaults(params_defaults)
    )
  );

function addParameter() {
  document.getElementById('nav-bottom-back').removeAttribute("href");
  const base_url = '<%= url_for(way_sleeps_path(params[:way_id])) %>';
  window.location = add_stored_params_to_url(base_url);
}

console.log(add_stored_params_to_url('http://bob.froed.vom/thingy'));

Upvotes: 1

York Chen
York Chen

Reputation: 744

 localStorage.getItem('from') || ''

Upvotes: 1

Related Questions