Saving parts of URL information for reuse in React - javascript

How can one take the information of a URL?
I want to use the appended information on this URL http://localhost:3000/transaction?transactionId=72U8ALPE in a fetch API.
I am trying to take the value 72U8ALPE and save it to state or as a variable. Then use if on the URL I will use on a fetch request. For example
https://google.com/${the-url-last-part-saved-as-variable-or-in-state}

You can get the query parameters from the URL object.
This could look something like this:
let currentUrl = new URL(window.location);
let transactionId = currentUrl.searchParams.get('transactionId');
You can then use the variable to append to your HTTP request.

Related

How do I append a query parameter to my URL using Javascript?

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?
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);
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".
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>

Force language switch with URL parameter

Is there a way of forcing a language switch by URL parameter using javascript?
I want that when I go to this site 'wwww.google.com/en' he will be in English,
and when I went to 'wwww.google.com/it' he will be in Italian.
I have a button with setLanguage function that does this, but I want it to force it also when I get directly from the URL.
That type of configuration of a single page is typically handled with a query string, not a separate path. Instead of this:
https://www.google.com/en
Do this:
https://www.google.com/?lang=en
The query string data are available in searchParams:
let params = (new URL(document.location)).searchParams;
let lang = params.get('lang');
with window.location.pathname you will get a USVString containing an initial '/' followed by the path of the URL, and to get the first item from the url you can do something like:
const langURI = window.location.pathname.split('/')[1]
You can get info about the USVString here

How to pass wildcard in vue js post request?

How I can get the current wildcard id and pass it to my $http.post route in vue?
Once I created a quiz information it will return a page with a new url
http://localhost:8000/question/index/quiz/3
Then when I want to do a post route with a name
Route::post('question/store/quiz/{quiz}');
Here is my Vue http request post method
this.$http.post('/question/store/'+ , input).then((response) => {
What will be id that I can pass after the + sign?
Well this is pretty hacky, but it'll work if your URLs are always going to be formatted like that. so what I'm doing here is using vanilla JS to get the URL pathname, parse the string by the / and turn it into an array, then grab the last index.
var locationString = location.pathname
var locationArray = locationString.split('/')
var quizId = locationArray[locationArray.length - 1];
The quizId variable is the wildcard you're looking for
You should note that this is going to break if you ever have any query parameters, such as a URL looking like: /index/quiz/3?v=2842

Passing a query string to a request as an actual string using Node and Express

So, basically what I am doing is scraping a webpage, getting all of the data I want and displaying it on a webpage on my site. When scraping this specific page i need the link within the 'href' tag. However, this particular site doesn't use regular links. Inside the 'href' tag is a query string. My plan was to take what was inside the 'href' and create a url to make my next request, but now when I try to pass the query string into the url, I can not access it in Node via req.params
I want to know if there is a way to maybe pass a query string without the server thinking it is a query string, or will I have to use req.query to take all the params and build the URL again from scratch?
Here are some examples of what I am talking about:
page1.ejs:
some.href = "?variable=bleh"
Server-side handling:
app.get('/display/:string', function(req, res) {
var url = "http://theurlineed.com/" + req.params.string;
});
This code does not work. When i click on the link it tells me it couldn't get /display/?variable=bleh
You need to encode the query string so that it is not treated like a query string in the URL:
some.href = encodeURIComponent("?variable=bleh");
So then your URL will be: /display/%3Fvariable%3Dbleh. As mentioned in the comments, Express will automatically decode the value in req.params.string so it will be the right value.

Make an ajax request to get some data, then redirect to a new page, passing the returned data

I want to redirect after a successful ajax request (which I know how to do) but I want to pass along the returned data which will be used to load an iframe on the page I just redirected to.
What's the best way to pass such data along and use it to open and populate an iframe in the page I just redirected to?
EDIT:
I am passing a GET variable but am having to use the following to access it for use in my iframe src attribute:
function $_GET(q,s) {
s = (s) ? s : window.location.search;
var re = new RegExp('&'+q+'=([^&]*)','i');
return (s=s.replace(/^\?/,'&').match(re)) ? s=s[1] : s='';
}
var d = $_GET('thedata');
I assume there isn't really a more straightforward way to access the GET vars?
If it's not too much data, you could pass it as a get parameter in the redirect:
document.location = "/otherpage?somevar=" + urlescape(var)
Remember that urls are limited to 1024 chars, and that special chars must be escaped.
If it is beyond that limit your best move is to use server side sessions. You will use a database on the server to store the necessary information and pass a unique identifier in the url, or as a cookie on the users computer. When the new page loads, it can then pull the information out of the database using the identifier. Sessions are supported in virtually every web framework out of the box.
Another alternative may be to place the data as a hidden attribute in a form which uses the post method (to get around the 1024 char limit), and simulating a submission of the form in javascript to accomplish the redirect, including the data.

Categories