In my angular JS app i need to send data to server:
"profile":"OLTP",
"security":"rsh",
"availability":"4",
"performance": {
"TRANSACTION_PER_SEC":1000,
"RESPONSE_TIME":200,
"CONCURRENT_CONNECTION_COUNT":500,
"STORAGE_SIZE":200,
"TOTAL_CONNECTION_COUNT":500
}
and in return i'll get
{"estimate" : 1600,"quoteid" : "Q1234"}
I was trying to do that with $resource but I am lost in syntax.
app.factory("VaaniEstimateService", function($resource) {
var requestURL = "http://128.34.32.34:8080/enquiry";
return $resource(requestURL, {callback: 'JSON_CALLBACK'}, { get: { method:'JSON'}, isArray:false });
});
Can you please provide me something to get me on the right path.
You must use JSONP method and insert JSON_CALLBACK keyword to your url as callback function.
app.factory("VaaniEstimateService", function($resource) {
return $resource("http://128.34.32.34:8080/enquiry?callback=JSON_CALLBACK", {}, {
get: {
method:'JSONP'
},
isArray:false
}).get({
profile:"OLTP",
security:"rsh",
availability:"4",
"performance.TRANSACTION_PER_SEC":1000,
"performance.RESPONSE_TIME":200,
"performance.CONCURRENT_CONNECTION_COUNT":500,
"performance.STORAGE_SIZE":200,
"performance.TOTAL_CONNECTION_COUNT":500
}, function (response) {
console.log('Success, data received!', response);
});
});
Your params will be sent as query params. Angularjs will automatically generate a global function for callback and replace its name with JSON_CALLBACK keyword. Your server must return json as javascript code by calling function that sent with callback parameter. For example, AngularJS is going to make GET request to that url:
http://128.34.32.34:8080/enquiry?callback=angular.callbacks._0?availability=4&performance.CONCURRENT_CONNECTION_COUNT=500&performance.RESPONSE_TIME=200&performance.STORAGE_SIZE=200&performance.TOTAL_CONNECTION_COUNT=500&performance.TRANSACTION_PER_SEC=1000&profile=OLTP&security=rsh
And your server must return response like that:
angular.callbacks._0({"estimate" : 1600,"quoteid" : "Q1234"});
Hope that's enough to give you an idea how jsonp works.
Related
I want to send multiple replies for a single user-triggered postback on Messenger. I've been following Messenger's developer documentation and couldn't really find how to do this.
My code structure is very similar to the tutorials they've given on the site, I have a 'handlePostback' function which identifies the received postback and compares it to a set of predefined payloads to find the 'response' JSON object. This response is given to 'callSendAPI' which puts this JSON object into the basic format of sending the message back to the Messenger API.
function handlePostback(sender_psid,receivedPostback)
{ if(payload== 'defined_payload') {
response = {
text: 'Some text'
};
callSendAPI(sender_psid,response);
}
function callSendAPI(sender_psid,response) {
let body = {
recipient: {
id= sender_psid
},
message: response
};
// Followed by code for POST request to the webhook
}
This being the basic structure, now I want to send multiple messages as a reply to one postback. I did some digging, and I found that the solution might be to create a message [] array. But how do I do this? Because my 'response' is being generated through that function, and the messages structure should look like this (I think):
let body = {
recipient: {
id=sender_psid
},
messages: [ {
response1
},
{
response2
}
]
};
I hope I could explain my question, please let me know if I can provide more details!
Nice question. If you are not familiar with Node.js the way to do it is not too obvious and this is not documented well on Facebook's Send API Documentation.
Firstly, your approach of sending multiple messages, using an array, as you may have observed won't work. Facebook has a solution for sending up to 100 API Calls with one request but in my opinion this is not needed in your situation. If you want to find out more about it check out the Batched Request Documentation, you'll find out that the implementation is different than yours.
One solution that will work is to call the callSendAPI function multiple times. But this solution has one major drawback: You won't be able to control the actual sequence of the messages sent. For example if you want to send two separate messages, you cannot guarantee which will be sent first to the user.
To solve this issue you need to chain your callSendAPI functions in a way that guarantees that the next callSendAPI call will happen only after the first message is already sent. You can do this in NodeJS by using either callbacks or promises. If you are not familiar with either of them, you can read this for callbacks and this for promises.
You'll need to modify your callSendAPI function and especially the part that sends the POST request to Facebook. I will present a solution to your issue by using promises and the module node-fetch.
const fetch = require('node-fetch');
function handlePostback(sender_psid,receivedPostback){
if (payload == 'defined_payload') {
response = {
text: 'Some text'
};
response2 = //... Another response
response3 = //... Another response
callSendAPI(sender_psid,response).then(() => {
return callSendAPI(sender_psid, response2).then(() => {
return callSendAPI(sender_psid, response3); // You can add as many calls as you want
});
});
}
}
function callSendAPI(sender_psid,response) {
let body = {
recipient: {
id= sender_psid
},
message: response
};
const qs = 'access_token=' + encodeURIComponent(FB_PAGE_TOKEN); // Here you'll need to add your PAGE TOKEN from Facebook
return fetch('https://graph.facebook.com/me/messages?' + qs, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(body),
});
}
I found the below link useful to sort out the way to implement multiple responses on single post back.
https://codingislove.com/build-facebook-chat-bot-javascript/
Like you said, array should work. Create an array variable with multiple response messages
var multipleResponse = {
messages: [{
response1
},
{
response2
}]
};
And push the array variable to your function
function callSendAPI(sender_psid,response) {
let body = {
recipient: {
id= sender_psid
},
message: []
};
// Followed by code for POST request to the webhook
}
Finally push the array to your function array
body.message.push(multipleResponse.messages);
#Christos Panagiotakopoulos. I am not getting my mainMenuResponse which is chained using then. Rather, i am getting response thrice.
handlePostback function =>
// Handles messaging_postbacks events
function handlePostback(sender_psid, received_postback) {
let response;
// Get the payload for the postback
let payload = received_postback.payload;
// Set the response based on the postback payload
if (payload === 'fashionTip') {
response = { "text": getFashionTip() } // calls a function which gives a fashion-tip
// Send the message to acknowledge the postback
callSendAPI(sender_psid, response).then(() => {
return callSendAPI(sender_psid, mainMenuResponse)
});
callSendAPI function =>
// Sends response messages via the Send API
function callSendAPI(sender_psid, response) {
// construct the message body
let request_body = {
"recipient": {
"id": sender_psid
},
"message": response
}
// Send the HTTP request to the messenger platform
request({
"uri": "https://graph.facebook.com/v2.6/me/messages",
"qs": {"access_token": PAGE_ACCESS_TOKEN},
"method": "POST",
"json": request_body
}, (err, res, body) => {
if (!err) {
console.log("Message sent!");
} else {
console.error("Unable to send mesage:" + err);
}
});
}
Don't modify callSendAPI function. In your handlePostback function call callSendAPI multiple times.
callsendAPI(sender_psid,response1);
callsendAPI(sender_psid,response2);
I want to make a HTTP-POST-Request with AJAX to call a JSON API. So, the API should return a response in JSON. I can see on the console of the API, that the request is successful. But the problem is, that no data or status is returned, or that I can't use it with JQuery. Here is my function:
$.post("http://api-adress/controller",
{
email: input_mail,
password: input_pw
},
function(data, status){
alert(data);
alert(status);
}, 'json');
I guess the problem is that the response from the Server does not get saved in the variables data and status correctly.
I would suggest to change a little bit your code like below:
var dataString = {
email: input_mail,
password: input_pw
}
$.post("http://api-adress/controller", dataString, function (result) {
})
.done(function (result) {
//Here is your result. You must parseJSON if it is json format
var data = jQuery.parseJSON(result);
})
.fail(function () {
//use this if you need it
})
Also make sure that you get the response through firebug in console tab. You can check there what you post, what you get etc.
There is a Webservice that is returning a json object in below format:
["Brazil","Argentina","Chile"]
(this json object has been parsed by Online JSON parsers, which proves it is a proper json object)
In AngularJS, I wrote the below code to consume the WebService.
app.factory('webServiceFactory', ['$http', function ($http) {
return $http.get('http://SomeWebService/api/anOperation')
.success(function (data) {
return data;
})
.error(function (err) {
return err;
});
}]);
When I call this in my controller, the success part is never hit and, instead, the error part is executed. That means there is some error calling the web-service. I think it has to do something with the JSON object that is being returned.
Edit 1: The Controller code
app.controller('mainController', ['$scope', 'webServiceFactory', function ($scope, webServiceFactory) {
webServiceFactory.success(function (data) {
$scope.Countries = data;
});
}]);
Edit 2: Localhost & CORS
When I hosted the service in my local IIS and consumed it using localhost, it worked. That means there is no error in consuming the JSON String array.
However, when I use a Fully qualified name or machine name, the FireFox indicates CORS header missing 'Access-Control-Allow-Origin'.
This might lead to another question, as to how to make it CORS compatible. However, the main question is closed.
So, my question, is How do I consume a web-service in AngularJS that returns just an array of strings with no Key/Value pair?
Thanks
maybe you are doing a request to a service in other domain; that is not possible since exists the "same origin policy" https://www.w3.org/Security/wiki/Same_Origin_Policy
app.factory('webServiceFactory', ['$http', function ($http) {
return
{
getCountries: function(callback){
$http.get('http://SomeWebService/api/anOperation').then(function(reponse){
callback(response.data);
});
}
};
}]);
Then in your controller
webServiceFactory.getCountries(function(countries){
$scope.countries = countries;
});
Well, i'm having some difficult to understand the use of angular.toJson. I completely understand that it changes to a json object...
But, how can i send this obj to the server ?
The server already gives a json obj when 'GET', but how use it to 'POST' and others?
sorry, i'm new :)
You can create factory in your app:
var app = angular.module('myApp', []);
app.factory('requestsFactory', ['$http', function ($http) {
return {
postData: function (data) {
var url = // some url to send your data
return $http.post(data, url);
};
};
}];
And now, you can post your data from controllers:
app.controller('yourController', ['$scope', 'requestsFactory', function ($scope, requestsFactory) {
...
requestFactory.postData(anyData).success(function (result) {
// if server send any response
}
...
}]);
Also you can use $http for GET, PUT, DELETE requests. Click here for more information
You don't actually need to call angular.toJson() yourself when posting data to a server or retrieving data from the server using the $http service.
This is the default behaviour that Angular does for you.
From the docs:
Angular provides the following default transformations:
Request transformations ($httpProvider.defaults.transformRequest and
$http.defaults.transformRequest):
If the data property of the request configuration object contains an
object, serialize it into JSON format.
Response transformations
($httpProvider.defaults.transformResponse and
$http.defaults.transformResponse):
If XSRF prefix is detected, strip it (see Security Considerations
section below).
If JSON response is detected, deserialize it using a
JSON parser.
I have this plunker
http://plnkr.co/edit/ml1Eqvz5pZY1MgxX87s7?p=preview
i am trying to query the .json file with no success. here is my factory
app.factory('myService', function($http, $q) {
return {
getFoo: function() {
var deferred = $q.defer();
$http({ url: 'foo.json',
method : "GET",
params : { 'item.id' : 0 } })
.success(function(data) {
deferred.resolve(data);
}).error(function(){
deferred.reject();
});
return deferred.promise;
},
}
});
it works well but it doesn't get only the id:0. I want not to load all data from the .json file. I want to load only what's in id:0
any pointers?
thank you
What you have is a static JSON file. You can add every parameter you want to the request, if there is no dynamic component at server-side to interpret these parameters and serve what you want to serve, sending parameters is useless: the server receives a request for a static JSON file, and it serves the static JSON file.