Question

36

How to send an HTTP request with a header parameter?

rated 0 times [ 39] [ 3] / answers: 1 / hits: 162815 / 9 Years ago, wed, december 16, 2015, 12:00:00

I'm very new to javascript and web programming in general and I need some help with this. I have an HTTP request that I need to send through javascript and get need to store the output in a variable. I tried using just the call url:

https://api.fantasydata.net/nfl/v2/JSON/PlayerSeasonStats/2015

But it returns an authentication error because I didn't send my API key and it doesn't show me how to do it just in the URL. The API key is listed as a header and not a paramater and I'm not sure what to do with that. I tried using the XMLHttpRequest() class but I'm not quite sure I understand exactly what it does nor could I get it to work.

The actual HTTP Request

GET https://api.fantasydata.net/nfl/v2/JSON/PlayerSeasonStats/2015 HTTP/1.1

Host: api.fantasydata.net

Ocp-Apim-Subscription-Key: ••••••••••••••••••••••••••••••••

I just need to figure out how to send that request along with the key and how to store the JSON doc it returns as a variable in javascript.

EDIT: This is what I have so far:

function testingAPI(){

var key = 8a1c6a354c884c658ff29a8636fd7c18;

httpGet(https://api.fantasydata.net/nfl/v2/JSON/PlayerSeasonStats/2015,key    );

alert(xmlHttp.responseText);

var x = 0;

}



function httpGet(theUrl,key)

{

var xmlHttp = new XMLHttpRequest();



xmlHttp.open( GET, theUrl, false ); // false for synchronous request

xmlHttp.setRequestHeader(Ocp-Apim-Subscription-Key,key);

xmlHttp.send( null );

return xmlHttp.responseText;

}

Thank you!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

shylaelisan

Add To Favorites

Follow

Total Points: 37

Total Questions: 94

Total Answers: 110

Location: Angola

Member since Tue, May 5, 2020

4 Years ago

shylaelisan questions

1 Error Argument is not assignable to parameter of type 'AxiosRequestConfig'

Sun, Jun 27, 21, 00:00, 3 Years ago

1 TypeScript - Element implicitly has an 'any' type [...] No index signature with a parameter of type 'string' was found on type

Wed, Nov 11, 20, 00:00, 4 Years ago

1 React Hooks Update Dictionary State

Mon, Jul 27, 20, 00:00, 4 Years ago

1 class array property value change using find method for all the elements in typescript

Thu, Feb 27, 20, 00:00, 4 Years ago

1 How to make disabled date and time in react datepicker?

Fri, Aug 23, 19, 00:00, 5 Years ago

View All

answered 9 Years ago alvin · Accepted Answer

If it says the API key is listed as a header, more than likely you need to set it in the headers option of your http request. Normally something like this :

headers: {'Authorization': '[your API key]'}

Here is an example from another Question

$http({method: 'GET', url: '[the-target-url]', headers: {

  'Authorization': '[your-api-key]'}

});

Edit : Just saw you wanted to store the response in a variable. In this case I would probably just use AJAX. Something like this :

$.ajax({ 

   type : GET, 

   url : [the-target-url], 

   beforeSend: function(xhr){xhr.setRequestHeader('Authorization', '[your-api-key]');},

   success : function(result) { 

       //set your variable to the result 

   }, 

   error : function(result) { 

     //handle the error 

   } 

 });

I got this from this question and I'm at work so I can't test it at the moment but looks solid

Edit 2: Pretty sure you should be able to use this line :

headers: {'Authorization': '[your API key]'},

instead of the beforeSend line in the first edit. This may be simpler for you