5

I am building a web app and I am using Firebase to store my user's data in Cloud Firestore. There is a page on my web app that allows users to view their documents from Cloud Firestore. I would like to add a query parameter to the end of my URL on view.html so I can take that query parameter value and use it to search for a document.

I have been searching online to find possible solutions. So far I have come across a few videos on the topic, but they haven't been going into the depth I have been needing. For example, this video shows how to add and get query parameters from a URL, but it only shows how to log those changes in the console. How would I make that my URL?

I've also be browsing Stackoverflow for solutions. This Stackoverflow post asks a similar question, however, many of the solutions in the answers causes view.html to reload on a loop. Why would this be, and if this is a possible solution, how would I stop this from happening.

How would I go about appending and fetching URL query parameters in Javascript?

michaelderiso
  • 145
  • 1
  • 1
  • 12
  • What kind of app is it? Are you using any frameworks? – Aluan Haddad May 16 '20 at 00:03
  • @AluanHaddad It is a standard web application using HTML, CSS, and Javascript. The only frameworks I am using are jQuery and Firebase SDK. I'm trying to stick to vanilla Javascript just for learning purposes, that's why I specifically asked for a JS solution in my question. I am new to web development, so I am getting the basics down as much as possible. – michaelderiso May 16 '20 at 01:08
  • 1
    That is great to hear. Far too many people begin with something incredibly complex, like Angular, and never learn JavaScript properly. I was only asking because many frameworks have integrate client side routing and you would need to be aware of their behavior and could take advantage of it. – Aluan Haddad May 16 '20 at 01:11

3 Answers3

11

You say you want to do this in javascript, so I assume the page itself is building/modifying a link to either place on the page or go to directly via javascript.

In javascript in the browser there is the URL object, which can build and decompose URLs

let thisPage = new URL(window.location.href);
let thatPage = new URL("https://that.example.com/path/page");

In any case, once you have a URL object you can access the parts of it to read and set the values.

Adding a query parameter uses the searchParams attribute of the URL, where you can add parameters with the .append method — and you don't have to worry about managing the ? and & … the method takes care of that for you.

thisPage.searchParams.append('yourKey', 'someValue');

This demonstrates it live on this page, adding search parameters and displaying the URL at each step:

let here = new URL(window.location.href);
console.log(here);
here.searchParams.append('firstKey', 'theValue');
console.log(here);
here.searchParams.append('key2', 'another');
console.log(here);
Stephen P
  • 14,422
  • 2
  • 43
  • 67
  • Appending parameters using `searchParams` works, and the new URL was successfully logged in the console with its search parameters. However, I am still unsure about the second part of my question: how would I make the URL with search params the page's URL, not just logging it into the console. I've tried `window.location.href = here`, however the page just gets stuck in an infinite reloop, adding the parameter to the URL until I break the connection to the page. – michaelderiso May 16 '20 at 01:06
  • @m_de41 — I suspect the infinite loop would be due to _how_ your code is getting invoked... at page load? when the user does something? ... but you don't show any code at all, so there is no way to tell. – Stephen P May 17 '20 at 19:59
  • @StephenP `console.log(here)` will become `console.log(here.href)` now. – node_saini Mar 23 '23 at 12:49
  • @node_saini It's not really "now", it's always been that way ... The difference is `here` is an object while `here.href` is a string. [The URL instance method `toString`](https://developer.mozilla.org/docs/Web/API/URL#instance_methods) is the same as `URL.href` so `console.log(here)` is the same as `console.log(here.toString())` is the same as `console.log(here.href)` (except in a browser debugger, where console.log(here) may output the URL object structure) – Stephen P Mar 23 '23 at 19:00
0

I have solved this issue in the simplest way. It slipped my mind that I could link to view.html by adding the search parameter to the URL. Here's what I did:

On index.html where I link to view.html, I created the function openViewer();. I added the parameter to the end of URL href.

function openViewer() {
     window.location.href = `view.html?id={docId}`;
}

Then on view.html, I got the parameter using URLSearchParameters like so:

const thisPage = new URL(window.location.href);
var id = thisPage.searchParams.get('id');

console.log(id)

The new URL of the page is now "www.mysite.com/view.html?id=mydocid".

michaelderiso
  • 145
  • 1
  • 1
  • 12
0

You can try to push state as so in the actual view.html

<script>
  const thisPage = new URL(window.location.href);
  window.history.pushState("id","id",thisPage);
</script>
Esset
  • 916
  • 2
  • 15
  • 17
M. Richard
  • 1