CODEWITHSUNDEEP
javascriptjqueryjsonajaxapi
Developer101
Developer101

Reputation: 17

How to use an API Key for an Ajax call?

I am trying to include an API key for the first time from New York Times API ( http://developer.nytimes.com/) and use ajax to fetch news from it to populate a local website but I'm not seeing any results. I was told to Make sure your API key is set in the URL's query parameters but I'm not sure how to do it.

 ?api-key=your-key

Here is what I have done: 

// Built by LucyBot. www.lucybot.com
var url = "https://api.nytimes.com/svc/search/v2/articlesearch.json";
url += '?' + $.param({
'api-key': "111111111111111111111111111111"
});
$.ajax({
url: url,
method: 'GET',
}).done(function(result) {
console.log(result);
}).fail(function(err) {
throw err;
});

I need to see the url in json format for various stories such as business, technology, etc and use them for an ajax call.

Upvotes: 0

Views: 18689

Answers (3)

Gabriel Gomes
Gabriel Gomes

Reputation: 348

Its not a good practice expose API Key directly in client-side context.

I strongly recommend to create an abstraction layer between the browser and the API.

The idea is target the AJAX request to one own backend action, like:

var url = "www.mydomain.com/api/articlesearch";
$.ajax({
url: url,
method: 'GET',
}).done(function(result) {
    console.log(result);
}).fail(function(err) {
    throw err;
});

And inside the backend (/api/articlesearch) we place the request that target to NY Times, using the API Key

This way you get a more suitable code for javascript, keeping the responsibilities correctly distributed.

PS: If you want it even more safe, you can define the API Key using env variables. Here is an example made in Ruby (just for figure it):

# Inside ApisController
def articlesearch
    response = RestClient::Request.execute(
    method: :get,
    url: 'https://api.nytimes.com/svc/search/v2/articlesearch.json',
    headers: {api_key: ENV['API_KEY']})

    render json: response
end

Using this approach the API Key will also not be present in GIT repository :)

Upvotes: 1

Milan Chheda
Milan Chheda

Reputation: 8249

Well, you should try it this way. It should give you a result without cross-origin errors: 

$.ajax({
  type: 'GET',
  url: 'http://api.nytimes.com/svc/search/v2/articlesearch.json',
  data: {
    'q': queryString,
    'response-format': "jsonp",
    'api-key': nytApiKey,
  },
  success: function(data) {
    // passed function object for data processing 
    console.log(data);
  },
  error: function(err) {
    console.log('error:' + err)
  }
});

Upvotes: 0

Sourabh Somani
Sourabh Somani

Reputation: 2138

Try this I am getting data from this 

var url = "https://api.nytimes.com/svc/search/v2/articlesearch.json";
url += '?' + $.param({
  'api-key': "11111111111111111111111"
});
$.ajax({
  url: url,
  method: 'GET',
  dataType: 'JSON',
  success: function(data) {
    console.log(data)
  },
  error: function(err) {
    console.log('error:' + err)
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

you can also try like as follows

var url = "https://api.nytimes.com/svc/search/v2/articlesearch.json";
$.ajax({
  url: url,
  method: 'GET',
  dataType: 'JSON',
  data: {
    'api-key': '11111111111111111'
  },
  success: function(data) {
    console.log(data)
  },
  error: function(err) {
    console.log('error:' + err)
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Related Questions