I am referencing this code to build a twitch viewer app, which I'm having difficulties in understanding:
$(document).ready(function() {
let usernames = ["user1", "user2", "user3", "user4"];
usernames.forEach(function(user) {
let http = "https://api.twitch.tv/kraken/streams/" + user;
function getAjax(getdata) {
$.ajax({
url: http,
headers: {
'Client-ID': 'myclientid'
},
success: function(data) {
getdata(data)
}
});
}
});
})
What does 'headers' do exactly? I looked it up on twitch and couldn't find a detailed description. It doesn't look like it gives/adds anything to my http request. Twitch says the header "securely identify my application." but wasn't sure what that mean. I thought if it works similar to an API key it should be included in the request.
What does the 'getdata' function in this code do? does it simply store the data i receive from the ajax request?
1) Headers are included in the request. You should be able to see them in the developer tools; this is what it looks like in Firefox
2) getdata is a callback function that is passed into getAjax by consumers, which can then act on the data as necessary, for example...
getAjax(function(data) {
// do something with data
})
Note also, you're redeclaring the function in each iteration of the loop, but not actually calling it anywhere. You probably want something more like this...
$(document).ready(function() {
let usernames = ["user1", "user2", "user3", "user4"];
function getAjax(url, getdata) {
$.ajax({
url: url,
headers: {
'Client-ID': 'myclientid'
},
success: function(data) {
getdata(data)
}
});
}
usernames.forEach(function(user) {
let http = "https://api.twitch.tv/kraken/streams/" + user;
getAjax(http, function(data) {
// do something with data
})
});
})
Related
I have a problem with my AJAX. Using Insomnia, I was able to get in with a successful response of 200 using the API token.
However, when I implement it in the HTML, I get a 401 response of access denied.
$.ajax({
url: "https://ecoexchange.dscloud.me:8080/api/get",
method: "GET",
apikey: sessionStorage.getItem("apikey"),
dataType: 'json',
success: function(result) {
$('#infoTable tr').empty();
var header = $('#infoTable thead');
var body = $('#infoTable tbody');
var hTr;
$('#infoTable thead').append(hTr = $('<tr>'));
// Headers
for (var h = 0; h < result.headers.length; h++) {
hTr.append($('<th>', {
text: result.headers[h]
}))
}
// Body
for (var d in result.data) {
var data = result.data[d];
$('#infoTable tbody').append($('<tr>')
.append($('<td>', {
text: data.RecyclableID
}))
.append($('<td>', {
text: data.Name
}))
.append($('<td>', {
text: data.RecyclableType
}))
)
}
}
})
I am not sure how to put in the token or user name or password.
How can I improve the code so I don't get the error?
What is this apikey parameter you're using? That's not in the documentation.
apikey: sessionStorage.getItem("apikey"),
Did you mean to pass it as a header instead? For example:
headers: {"apikey": sessionStorage.getItem("apikey")},
The documentation for the service you're using should specify how to include the API key. Presumably you have that information, because:
Using Insomnia, I was able to get in with a successful response
So you'll need to include the value in your AJAX request wherever it belongs. Most likely as either a header value or a query string value. But the jQuery .ajax() function isn't going to know how to pass the value, you have to specify.
I think your problem is with passing queries which can be solved here
As it's been said on David's answer , You must know where your apikey is required on the server-side, in header or queries(parameters).
If your apikey is required on queries based on the docs you can use :
$.get('/api/get' , {'apikey' : 'YOUR-KEY'}).done((res) => {
console.log(res)
})
Or if your apikey is required in headers:
$.ajax({
url: '/api/get',
type: 'GET',
headers: {'apikey' : 'YOUR-KEY'},
success : (res) =>{
console.log(res);
}
})
jQuery.ajax() docs can be found here
And jQuery.get() docs here
What I am trying to do:
1. Initially gives an ajax request to the server based on some inputs
2. The server returns a job id generated by RQ (Python-rq)
3. Based on the job id ajax request made to a url constructed with the jobid regularly till a valid response is obtained
What I have:
$.ajax({
type: "POST",
url: "/start",
data:{crop: valueCrop, state: valueState, variablemeasure: valueVariable, unit:unitMeasure, from:yearFrom, to:yearTo},
success: function(results) {
console.log(results);
var jobId='';
jobId = results;
function ajax_request() {
$.ajax({
type: "GET",
url: "/results/" + jobId,
dataType: "json",
success:function(xhr_data) {
if (xhr_data == {"status":"pending","data":[]}){
console.log("Waiting for response");
setTimeout(function() { ajax_request(); }, 2000);
} else {
console.log(xhr_data);
}
},
error:function(error) {
console.log(error)
}
});
}
},
error: function(error) {
console.log(error)
}
})
Is this even possible? I am not getting any output at all on the console although the rq says the job is finished. I think it is not entering that if loop. When I visit the "/results/jobId" url I am able to see the result.
Please help.
I see a few bugs in this code. First of all, you have defined the function ajax_request(). But you are not calling it. You can call it at the end of its definition.
Secondly, this code is problematic:
if (xhr_data == {"status":"pending","data":[]})
The object notation creates another object which is definitely not equal to xhr_data.
You can do:
if (xhr_data.status === "pending")
I wrote a JQuery script to do a user login POST (tried to do what I have done with C# in the additional information section, see below).
After firing a POST with the JQuery code from my html page, I found the following problems:
1 - I debugged into the server side code, and I know that the POST is received by the server (in ValidateClientAuthentication() function, but not in GrantResourceOwnerCredentials() function).
2 - Also, on the server side, I could not find any sign of the username and password, that should have been posted with postdata. Whereas, with the user-side C# code, when I debugged into the server-side C# code, I could see those values in the context variable. I think, this is the whole source of problems.
3 - The JQuery code calls function getFail().
? - I would like to know, what is this JQuery code doing differently than the C# user side code below, and how do I fix it, so they do the same job?
(My guess: is that JSON.stringify and FormURLEncodedContent do something different)
JQuery/Javascript code:
function logIn() {
var postdata = JSON.stringify(
{
"username": document.getElementById("username").value,
"password": document.getElementById("password").value
});
try {
jQuery.ajax({
type: "POST",
url: "http://localhost:8080/Token",
cache: false,
data: postdata,
dataType: "json",
success: getSuccess,
error: getFail
});
} catch (e) {
alert('Error in logIn');
alert(e);
}
function getSuccess(data, textStatus, jqXHR) {
alert('getSuccess in logIn');
alert(data.Response);
};
function getFail(jqXHR, textStatus, errorThrown) {
alert('getFail in logIn');
alert(jqXHR.status); // prints 0
alert(textStatus); // prints error
alert(errorThrown); // prints empty
};
};
Server-side handling POST (C#):
public override async Task ValidateClientAuthentication(
OAuthValidateClientAuthenticationContext context)
{
// after this line, GrantResourceOwnerCredentials should be called, but it is not.
await Task.FromResult(context.Validated());
}
public override async Task GrantResourceOwnerCredentials(
OAuthGrantResourceOwnerCredentialsContext context)
{
var manager = context.OwinContext.GetUserManager<ApplicationUserManager>();
var user = await manager.FindAsync(context.UserName, context.Password);
if (user == null)
{
context.SetError(
"invalid_grant", "The user name or password is incorrect.");
context.Rejected();
return;
}
// Add claims associated with this user to the ClaimsIdentity object:
var identity = new ClaimsIdentity(context.Options.AuthenticationType);
foreach (var userClaim in user.Claims)
{
identity.AddClaim(new Claim(userClaim.ClaimType, userClaim.ClaimValue));
}
context.Validated(identity);
}
Additional information: In a C# client-side test application for my C# Owin web server, I have the following code to do the POST (works correctly):
User-side POST (C#):
//...
HttpResponseMessage response;
var pairs = new List<KeyValuePair<string, string>>
{
new KeyValuePair<string, string>( "grant_type", "password"),
new KeyValuePair<string, string>( "username", userName ),
new KeyValuePair<string, string> ( "password", password )
};
var content = new FormUrlEncodedContent(pairs);
using (var client = new HttpClient())
{
var tokenEndpoint = new Uri(new Uri(_hostUri), "Token"); //_hostUri = http://localhost:8080/Token
response = await client.PostAsync(tokenEndpoint, content);
}
//...
Unfortunately, dataType controls what jQuery expects the returned data to be, not what data is. To set the content type of the request data (data), you use contentType: "json" instead. (More in the documentation.)
var postdata = JSON.stringify(
{
"username": document.getElementById("username").value,
"password": document.getElementById("password").value
});
jQuery.ajax({
type: "POST",
url: "http://localhost:8080/Token",
cache: false,
data: postdata,
dataType: "json",
contentType: "json", // <=== Added
success: getSuccess,
error: getFail
});
If you weren't trying to send JSON, but instead wanted to send the usual URI-encoded form data, you wouldn't use JSON.stringify at all and would just give the object to jQuery's ajax directly; jQuery will then create the URI-encoded form.
try {
jQuery.ajax({
type: "POST",
url: "http://localhost:8080/Token",
cache: false,
data: {
"username": document.getElementById("username").value,
"password": document.getElementById("password").value
},
dataType: "json",
success: getSuccess,
error: getFail
});
// ...
To add to T.J.'s answer just a bit, another reason that sending JSON to the /token endpoint didn't work is simply that it does not support JSON.
Even if you set $.ajax's contentType option to application/json, like you would to send JSON data to MVC or Web API, /token won't accept that payload. It only supports form URLencoded pairs (e.g. username=dave&password=hunter2). $.ajax does that encoding for you automatically if you pass an object to its data option, like your postdata variable if it hadn't been JSON stringified.
Also, you must remember to include the grant_type=password parameter along with your request (as your PostAsync() code does). The /token endpoint will respond with an "invalid grant type" error otherwise, even if the username and password are actually correct.
You should use jquery's $.param to urlencode the data when sending the form data . AngularJs' $http method currently does not do this.
Like
var loginData = {
grant_type: 'password',
username: $scope.loginForm.email,
password: $scope.loginForm.password
};
$auth.submitLogin($.param(loginData))
.then(function (resp) {
alert("Login Success"); // handle success response
})
.catch(function (resp) {
alert("Login Failed"); // handle error response
});
Since angularjs 1.4 this is pretty trivial with the $httpParamSerializerJQLike:
.controller('myCtrl', function($http, $httpParamSerializerJQLike) {
$http({
method: 'POST',
url: baseUrl,
data: $httpParamSerializerJQLike({
"user":{
"email":"wahxxx#gmail.com",
"password":"123456"
}
}),
headers:
'Content-Type': 'application/x-www-form-urlencoded'
})
})
I am trying to input an array of string values and translate them using an API then bring them back and display the array in the same order.
I have been trying to make this work using the async.map function, however I can not find any resources or examples that help me understand how to properly do this.
This is what I have so far,
var request = require('request');
var async = require('async');
var array = ["This", "wedding", "is", "horse shit"]
var translate = function translate(inText, doneCallback) {
request({
method: 'POST',
url: "https://lc-api.sdl.com/translate",
headers: {
"Content-type": 'application/json',
"Accept": 'application/json',
"Authorization": 'LC apiKey=api_key_here'
},
body: {
to: 'fra',
from: 'eng',
text: inText
},
json: true
}, doneCallback(null, body.translation)));
}
async.map(array, translate, function (err, result) {
if (err) {
console.log("error");
} else {
console.log(result);
}
});
Any help in pointing out the proper way to do this, or a better way is much appreciated.
I think the error is whithin the translate function, the callback is called instantaneously, you don't wait for the asynchronous answer. Try something like this:
funcion translate(inText, doneCallback) {
$.get({ /* params */ }, function(response) {
// Make the external callback only in the callback of the request
doneCallback(null, response.translation);
});
});
I am using Laravel 4.2.6
This is my function with an ajax call to the controller's method called savesession
function saveActualSession() {
return $.ajax({
url: 'savesession',
data: {
my_username: $('input#username').val()
},
type: 'POST',
dataType: 'json',
success: function(response) {
console.log("success");
}
});
}
In controller I have this:
public function savesession()
{
if(Request::ajax())
{
$my_username = Input::post('my_username');
if ($my_username) { Session::put('my_username', $my_username); }
return $my_username;
}
}
Sessions saving is triggered like this on different places in my javascript code:
saveActualSession()
.done(function(e) {
// Things to be done after saving session
})
.fail(function(e) {
alert('oh no!')
});
The problem is that it's giving me this error in the console:
"NetworkError: 500 Internal Server Error - http://laravelsite.dev/savesession"
It's weird because the url exists 100%, because when I try to do this in the controller:
public function savesession()
{
if(Request::ajax())
{
$my_username = Input::post('my_username');
if ($my_username) { Session::put('my_username', $my_username); }
return $my_username;
}
else
{
print_r("url is working");
die();
}
}
and I access the url directly in my browser like:
http://laravelsite.dev/savesession
It's giving me the print_r message url is not working and it dies.
btw. my routes look like this:
Route::any('savesession', ['as' => 'savesession','uses' => 'RegistrationController#savesession']);
What am I doing wrong?
I have a similar AJAX function for getting sessions and that route works fine and no server errors are shown.
Any idea?
You have a wrong method there. Simply change...
$my_username = Input::post('my_username');
to this...
$my_username = Input::get('my_username');
Get does not refer to the HTTP Method in this context, it refers to what Laravel is doing - get an input value. This value can be GET or POST, it doesn't actually make a difference.