pass parameters to url fetch request javascript

Question

Hello i'm trying to make a get request in react

with JQuery i used to do something like this

$.get("Run",{ pr: "takeData", name: "Bob"}, function (o) {
                   console.log(o)
             
            });

i tried doing something like this

fetch("https://localhost:44347/Run?{
      pr:"takeData",
    name:"Bob"
    }) .then( res => res.text())
   .then((data) => {
        console.log(data);
   });

but id didn't worked,instead i had to do it like this

fetch("https://localhost:44347/Run?pr=takeData&name='Bob'") .then( res => res.text())
   .then((data) => {
        console.log(data);
   });

and it worked, but i can't figure out how to pass the "pr" and the "name" parameters without having to type them directly in the url can someone help me?

This github issue might help you https://github.com/github/fetch/issues/256 — Sahil Raj Thapa, Sep 10 '20 at 15:37
Does this answer your question? [Setting query string using Fetch GET request](https://stackoverflow.com/questions/35038857/setting-query-string-using-fetch-get-request) — Heretic Monkey, Sep 10 '20 at 16:08

score 1 · Answer 1 · answered Sep 10 '20 at 16:05

1

You can create URL and URLSearchParams objects to create your request without writing the fields in the URL by hand.

var url = new URL("https://localhost:44347/Run");
url.search = new URLSearchParams({ pr: "takeData", name: "Bob"});
fetch(url).then( res => res.text())
       .then((data) => {
         console.log(data);
     });

answered Sep 10 '20 at 16:05

Musa

96,336
17
118
137

Please at least look for duplicates for such obvious questions... – Heretic Monkey Sep 10 '20 at 16:09

score 0 · Answer 2 · answered Sep 10 '20 at 15:29

You can use templates literals for that see this : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Here is an exemple :

const myString = `https://localhost:44347/Run?pr=${varPr}&name=${varName}`

Another way is to add strings like this :

const myString = "https://localhost:44347/Run?pr=" + varPr + "&name=" + varName

pass parameters to url fetch request javascript

2 Answers2