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 github.com/github/fetch/issues/256 — Sahil Raj Thapa
– Sahil Raj Thapa, Commented Sep 10, 2020 at 15:37
Does this answer your question? Setting query string using Fetch GET request — Heretic Monkey
– Heretic Monkey, Commented Sep 10, 2020 at 16:08

Musa · Accepted Answer · 2020-09-10 16:05:52Z

2

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, 2020 at 16:05

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Heretic Monkey Over a year ago

Please at least look for duplicates for such obvious questions...

Nam Bui · Accepted Answer · 2020-09-10 15:29:34Z

0

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

answered Sep 10, 2020 at 15:29

Nam Bui

1,3711 gold badge9 silver badges5 bronze badges

Collectives™ on Stack Overflow

pass parameters to url fetch request javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related