How to pass optional parameters using fetch vanilla JS

Question

I'm using JavaScript fetch GET method to call an API. The API returns data; however, there are optional parameters I'd like to pass in to format the data response in a different way. How do you pass optional parameters using the fetch method?

async function getText(){
    
    let passageParam = randomPassage();

    //API credit
    let Url = 'https://api.esv.org/v3/passage/text?q=' + passageParam + params;
    console.log(Url);
    //Await - Used with Async
    //Suspend function exeeuction until the Async promise settles and returns its result
    let response = await fetch(Url, {
        method: 'GET',
        headers: {
            'Authorization': 'myToken'
         },
        params = {
            'indent-poetry': False,
            'include-headings': False,
            'include-footnotes': False,
            'include-verse-numbers': False,
            'include-short-copyright': False,
            'include-passage-references': False
        }
    });

    if(response.ok){ // if HTTP-status is 200-299
        // get the response body
        let passage = await response.json();
        
        populateUI(passageParam, passage.passages[0]);
        //console.log(passage);
     } else{
        alert("HTTP-Error: " + response.status);
     }

     //Function to input json response to HTML
     function populateUI(ref, verse){
        //strip verse
        document.getElementById('reference').innerHTML = ref;
        document.getElementById('verse').innerHTML = verse;
    }

}

As you receive data from API ultimately it is mostly An array of objects. What do you mean when you say you want to format it dear :)? Kindly elaborate friend? — Imran Rafiq Rather
– Imran Rafiq Rather, Commented Nov 24, 2020 at 2:37
There's no such thing as params being passed to fetch. Allowed arguments are listed here. If it's a get request, you have to just add them to the URL in the form of a query string. It could be helpful to use URLSearchParams - fetch(`${url}?${new URLSearchParams({key:'value'}).toString()}`) — Adam Jenkins
– Adam Jenkins, Commented Nov 24, 2020 at 2:37

Steve · Accepted Answer · 2020-11-24 02:46:47Z

When using fetch with GET, it's generally expecting parameters be sent via a Query String.

You can try something like this:

let passageParam = randomPassage();
let extraParams = '&indent-poetry=False&include-headings=False' +
    '&include-footnotes=False&include-verse-numbers=False' + 
    '&include-short-copyright=False&include-passage-references=False';
let Url = 'https://api.esv.org/v3/passage/text?q=' + passageParam + extraParams;
console.log(Url);

Alternatively you can do something like this:

let passageParam = randomPassage();
let extraParams = {
    'indent-poetry': 'False',
    'include-headings': 'False',
    'include-footnotes': 'False',
    'include-verse-numbers': 'False',
    'include-short-copyright': 'False',
    'include-passage-references': 'False'
}
let Url = 'https://api.esv.org/v3/passage/text?q=' + passageParam + 
    '&' + (new URLSearchParams(extraParams)).toString();
console.log(Url);

And also delete the params expression.

Imran Rafiq Rather · Accepted Answer · 2020-11-24 02:47:05Z

0

Since you are making a GET request to a URL-EndPoint using fetch. The URL-EndPint will always return the same data format every time you call it.

And formatting a response is not in our hands in this case. To check all the response details, go to the network tab of Developer Console (do Ctrl+Shift+I), you can see the response headers and other related stuff that you have received in the response and see if any information is useful to you there itself.

answered Nov 24, 2020 at 2:47

Imran Rafiq Rather

8,2881 gold badge23 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to pass optional parameters using fetch vanilla JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related