to fetch calendar api events using AJAX and jQuery [on hold] - jquery

var mykey = 'AIzaSyAAfTq0YVTxBOlu2934U1VZYLb1WrSUlW';
var calendarid = '76199760110-ebricri57q6lo4qn8mupvhndk4q257s.apps.googleusercontent.com';
var api_url='https://www.googleapis.com/calendar/v3/calendars/'
$.ajax({
type: 'GET',
url: api_url + calendarid+ '/events?key=' + mykey,
dataType: 'json',
success: function (response) {
console.log('Success!')
},
error: function (response) {
console.log('error')
}
});
I create the client id and API key for google calendar API now I want to list out Google calendar API events with AJAX and jQuery

You can fetch data for the given api by using jquery ajax. Please go through the following code.
$.ajax(
{url: api_url,
data: arguments
success: function(result){
//handle your result here what you will get from api.
}}
);

Related

Parsing error when requesting JSONP object through Jquery?

A newbie here in regards to JS and JSONP. I have this format here:
var redditUrl = '//www.reddit.com';
var redditSearchUrl = redditUrl + '/submit.json';
var redditEmbedQuery = '?ref=share&ref_source=embed';
var query = window.location.href;
var url = redditSearchUrl + query;
var params = {
"url": query
};
// Requires JSONP to retrieve data from Reddit API
$(function() {
$.getScript('//embed.redditmedia.com/widgets/platform.js', function() {
/* $.getJSON(url, success)
.fail(failed); */
$.ajax({
url: redditSearchUrl,
data: params,
type: "GET",
dataType: "jsonp",
jsonp: "jsonp",
contentType: "application/json; charset=utf-8",
error: error,
success: success,
beforeSend: function() {
console.log(this.url);
}
});
});
});
and i'm trying to request a jsonp file from reddit.com/submit.json?json=?&url=... but when the file is executed, an error message stating that the callback was not called because of a parsing error.
Can anyone tell me what i'm doing wrong here? Is JSONP even enabled for /submit.json? I'm trying to search for youtube urls in the Reddit search bar to see if posts have been made about it before.

ajax API, can't get the data from API?

I'm trying to request data from API, I have tried in POSTMAN, and the API works fine, but when I tried it in ajax, there's no data.
my code:
$.ajax({
url: "http://food2fork.com/api/search",
beforeSend: function (xhrObj) {
// Request headers
xhrObj.setRequestHeader("Accept", "application/json");
},
data: { "q": a, "key": "38008dc1ca51f61c514c7e1393d55372" },
type: "GET",
dataType: 'json',
success: function (data) {
var list = data.recipes;
alert(list[0].title);
Builddivs(list);
}
});
I have also tried
$.get('http://food2fork.com/api/search', { q: a,key:"38008dc1ca51f61c514c7e1393d55372" }, function(data) {
alert(1);
var list = data.recipes;
alert(list[0].title);
});
it doesn't work either...
here is the link to the documentation
http://food2fork.com/about/api
the working POSTMAN screenshot is here
Can anyone fix it?

jQuery POST vs OPTIONS

I am trying jQuery Ajax for consuming rest service. Ajax request type is 'POST'. When I am try to load this then request is going as "OPTIONS" and I'm getting "501 Not Implemented" ( as shown in image)
<script>
var user ="user:pwd";
var auth = "Basic " + btoa(user);
$(function(){
$.ajax({
type: 'post',
url: 'https://xyz/api/core/v3/xyz',
dataType: 'json',
contentType: 'application/json',
data: '{"title":"test","content":"testpega" }',
success: function(resp) {
$('#log').html("success");
},
error: function(e) {
$('#log').html("error: "+e);
}
});
});
</script>
Any help/suggestion ?
Note: I am able to use same webservice with FireFox rest-client add-on.

Error while passing multiple parameters on Jquery ajax call?

I am implementing .net webservice (asmx) using JSONP using this tutorial.
When I call my webservice, with a single parameter it works. However, when I try to call with mulitple parameters i keep getting Network 500 error. I tried to use "data: JSON.stringify({ jewellerId: filter, locale: 'en-US' })," as described in this stackoverflow question: Pass Multiple Parameters to jQuery ajax call. However it doesn't work.
Hers is my script:
function getData()
{
var key = "123";
var code = "12458";
jQuery.ajax({ url: http://service.com/test.asmx,
data: JSON.stringify({ Key: key, Code: code }),
dataType: "jsonp",
success: function(json)
{
alert(json.d);
},
error: function() {
alert("Hit error fn!");
}
});
}
So, when i changed the webservice to take only one parameter, i changed the data to be like:
data: {Key: JSON.stringify("123") } it worked.
Any suggestions how i can fix this?
Don't stringify the data if you are sending it as GET (which is the case for jsonp requests)
function getData() {
var key = "123";
var code = "12458";
jQuery.ajax({ url: http://service.com/test.asmx,
data: { Key: key, Code: code },
dataType: "jsonp",
success: function(json) {
alert(json.d);
},
error: function() {
alert("Hit error fn!");
}
});
}

from jquery $.ajax to angular $http

I have this piece of jQuery code that works fine cross origin:
jQuery.ajax({
url: "http://example.appspot.com/rest/app",
type: "POST",
data: JSON.stringify({"foo":"bar"}),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (response) {
console.log("success");
},
error: function (response) {
console.log("failed");
}
});
Now I'm tring to convert this to Angular.js code without any success:
$http({
url: "http://example.appspot.com/rest/app",
dataType: "json",
method: "POST",
data: JSON.stringify({"foo":"bar"}),
headers: {
"Content-Type": "application/json; charset=utf-8"
}
}).success(function(response){
$scope.response = response;
}).error(function(error){
$scope.error = error;
});
Any help appreciated.
The AngularJS way of calling $http would look like:
$http({
url: "http://example.appspot.com/rest/app",
method: "POST",
data: {"foo":"bar"}
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
$scope.data = response.data;
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
$scope.error = response.statusText;
});
or could be written even simpler using shortcut methods:
$http.post("http://example.appspot.com/rest/app", {"foo":"bar"})
.then(successCallback, errorCallback);
There are number of things to notice:
AngularJS version is more concise (especially using .post() method)
AngularJS will take care of converting JS objects into JSON string and setting headers (those are customizable)
Callback functions are named success and error respectively (also please note parameters of each callback) - Deprecated in angular v1.5
use then function instead.
More info of then usage can be found here
The above is just a quick example and some pointers, be sure to check AngularJS documentation for more: http://docs.angularjs.org/api/ng.$http
We can implement ajax request by using http service in AngularJs, which helps to read/load data from remote server.
$http service methods are listed below,
$http.get()
$http.post()
$http.delete()
$http.head()
$http.jsonp()
$http.patch()
$http.put()
One of the Example:
$http.get("sample.php")
.success(function(response) {
$scope.getting = response.data; // response.data is an array
}).error(){
// Error callback will trigger
});
http://www.drtuts.com/ajax-requests-angularjs/
You may use this :
Download "angular-post-fix": "^0.1.0"
Then add 'httpPostFix' to your dependencies while declaring the angular module.
Ref : https://github.com/PabloDeGrote/angular-httppostfix
you can use $.param to assign data :
$http({
url: "http://example.appspot.com/rest/app",
method: "POST",
data: $.param({"foo":"bar"})
}).success(function(data, status, headers, config) {
$scope.data = data;
}).error(function(data, status, headers, config) {
$scope.status = status;
});
look at this : AngularJS + ASP.NET Web API Cross-Domain Issue

Resources