I am trying to include an API key for the first time from New York Times API ( /) 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
var url = ".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.

I am trying to include an API key for the first time from New York Times API ( http://developer.nytimes./) 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.
var url = "https://api.nytimes./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.

• javascript
• jquery
• json
• ajax
• api

3 Answers 3

Try this I am getting data from this

var url = "https://api.nytimes./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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

you can also try like as follows

var url = "https://api.nytimes./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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

I strongly remend 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./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./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 :)

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

$.ajax({
  type: 'GET',
  url: 'http://api.nytimes./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)
  }
});