I want to make a fetch request to an API that accepts different types of body requests: twitter handle, facebook link, phone number, etc. The structure of the body is:
body: {
"typeOfHandle": "input"
}
Since there are different types of handles, I test the input type and assign it to the body accordingly, as seen below:
// handle is the input
let atSign = /^[#]/,
handleIsTwitter = atSign.test(handle.value),
handleType;
handleIsTwitter ? handleType = `"` + "twitter" + `"` : console.log("not twitter");
let abc = `"` + handle.value + `"`;
let bodyOfFetch = `{${handleType}: ${abc}}`;
console.log("body: " + bodyOfFetch);
fetch("xxx", {
method: "POST",
headers: {
Authorization: "xxx"
},
body: JSON.stringify(bodyOfFetch)
})
.then(function(res) {
return res.json();
})
.then(function(json) {
console.log(json);
});
However, this method returns a body malformed error. When I do the request statically (i.e. replace the variables with static text, e.g. "twitter": "#alex") it works. I double-triple-quadruple checked the syntax, I don't think that is the problem. Can it be an issue on the API's side?
In your example bodyOfFetch is a string ({"twitter": "#alex"}). Either you can send it directly, this is:
fetch("xxx", {
method: "POST",
headers: {
Authorization: "xxx"
},
body: bodyOfFetch
})
Or you can send a stringify object:
fetch("xxx", {
method: "POST",
headers: {
Authorization: "xxx"
},
body: JSON.stringify({[handleType]: abc})
})
But sending JSON.stringify(bodyOfFetch) will stringify a json string, this will add surrounding " and escape existing quotation marks: "{\\"twitter\\": \\"#alex\\"}"
Hope this helps.
Related
https://developers.kaleyra.io/docs/send-a-media-template-message-through-whatsapp
I am trying to send a media to kalerays api through my code. But it is not working when I pass from code. But When I hit the API from postman then it works fine.
async whatsappAPIWithAttachment(requestBody) {
let api_key = "";
if (requestBody.campaign) {
api_key = "x";
} else {
api_key = "Y";
}
var data = qs.stringify({
from: "xyz",
to: "xyz",
type: "mediatemplate",
channel: "whatsapp",
template_name: "xyz",
params: '"name","vendor"',
lang_code: "en",
media_url: "http://www.africau.edu/images/default/sample.pdf",
});
var config: AxiosRequestConfig = {
method: "post",
url: "https://api.kaleyra.io/v1/HXIN1707222213IN/messages",
headers: {
"api-key": api_key,
"content-type": "multipart/form-data",
},
data: data,
};
let response = await axios(config);
return response.data;
}
}
It gives me an enter image description hereerror request failed with status code 400. Here I have replaced X, Y, and XYZ with actual parameters. So Inputs are correct but still get an error saying 'E413', message: 'Invalid/incorrect inputs.
As per sample request in kaleyra documentation, they have used
--header 'Content-Type: application/json'
while you are passing
"content-type": "multipart/form-data",
pls correct it and try.
how about using double quote strings for param value
params: "\"name\",\"vendor\""
Now I'm using Fetch to fetch some data from an API in SpringBoot.
const onSubmit = (data) => {
fetch("http://localhost:8080/addMedicine", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
};
Here is the Java code.
#PostMapping("/addMedicine")
public String addMedicine (#RequestBody Medicine medicine){
return medicineService.addMedicine(medicine);
}
public String addMedicine(Medicine medicine) {
medicineRepository.save(medicine);
System.out.println("Added medicine "+ medicine.getMedicineName());
return "Added medicine "+ medicine.getMedicineName() ;
}
The above methods are from different classes I just put them here to simplify my question.
Now when I use Postman I get the statement like
"Added medicine X"
Now when I post the data from my Frontend app which is in React. I want to get that statement so that I can use it to display something on the page as a confirmation.
How am I going to do it or for more info how does even Postman do it because it looks so easy from them? Please help.
this should work :
const onSubmit = (data) => {
fetch("http://localhost:8080/addMedicine", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
}).then(data=>{
// Do something ....
})
};
Im doing the paypal tutorial server side integration.
With PHP.
I'm having a problem.
I want to test funding failures,the last part
https://developer.paypal.com/docs/business/checkout/server-side-api-calls/handle-funding-failures/
I think I add the mock header in the right place but is doing nothing it keeps saying Transaction completed .
Whats the proper way to put it?
Paypal says:
In the call to Capture payment for order, include the PayPal-Mock-Response header with the mock_application_codes value set to INSTRUMENT_DECLINED. Sample code: -H "PayPal-Mock-Response: {"mock_application_codes" : "INSTRUMENT_DECLINED"}"
<script>
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
// Call your server to set up the transaction
createOrder: function() {
return fetch('examplecreateorder.php', {
method: 'post',
headers: {
'content-type': 'application/json'
}
}).then(function(res) {
return res.json();
}).then(function(data) {
return data.id;
});
},
// Call your server to finalize the transaction
onApprove: function(data) {
return fetch('examplecaptureorder.php', {
method: 'post',
headers: {
'content-type': 'application/json',
'PayPal-Mock-Response': {
'mock_application_codes': 'INSTRUMENT_DECLINED'
}
},
body: JSON.stringify({
orderID: data.orderID
})
}
).then(function(res) {
return res.json().catch(error => console.error('Error:', error));
}).then(function(orderData) {
// Three cases to handle:
// (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
// (2) Other non-recoverable errors -> Show a failure message
// (3) Successful transaction -> Show confirmation or thank you
// This example reads a v2/checkout/orders capture response, propagated from the server
// You could use a different API or structure for your 'orderData'
var errorDetail = Array.isArray(orderData.details) && orderData.details[0];
if (errorDetail && errorDetail.issue === 'INSTRUMENT_DECLINED') {
return actions.restart(); // Recoverable state, per:
// https://developer.paypal.com/docs/checkout/integration-features/funding-failure/
}
if (errorDetail) {
var msg = 'Sorry, your transaction could not be processed.';
if (errorDetail.description) msg += '\n\n' + errorDetail.description;
if (orderData.debug_id) msg += ' (' + orderData.debug_id + ')';
return alert(msg); // Show a failure message
}
// Show a success message
alert('Transaction completed by + orderData.payer.name.given_name);
})
}
}).render('#paypal-button-container');
</script>
In the headers, the value for PayPal-Mock-Response should just be a string and not an object:
...
headers: {
'content-type': 'application/json',
'PayPal-Mock-Response': '{"mock_application_codes" : "INSTRUMENT_DECLINED" }'
},
...
Note the difference between what was being specified in OPs code as an object literal:
'PayPal-Mock-Response': {
'mock_application_codes': 'INSTRUMENT_DECLINED'
}
And the working code treating the value of PayPal-Mock-Response as a string:
'PayPal-Mock-Response': '{"mock_application_codes" : "INSTRUMENT_DECLINED" }'
The request for the code below goes all ok but I don't get any data back (Just says "Error Not Found" in the "preview" tab of the request in chrome). I try the same query in GraphiQL and it gives back relevant data. I am not sure what I am missing here. Please advise, kind of stuck with this.
PlayService.prototype.getPlays = function(playID) {
//The query.
const playsQuery = `query ($playid: String) {
plays(id: $playid) {
id
items {
nodes {
id
name
}
}
}
}`;
// variables to pass.
const variables = {
playid: playID
};
//The request.
const result = $http.post(
/graphql,
{
method: 'POST',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ playsQuery, variables })
}
);
return result && result.data;
};
You appear to be sending the data body as:
{
playsQuery: "<query string>",
variables: {}
}
The GraphQL spec specifies that you must follow this format for GraphQL queries over REST:
http://graphql.org/learn/serving-over-http/
{
"query": "...",
"operationName": "...",
"variables": { "myVariable": "someValue", ... }
}
I am getting the following error when trying to perform a request.post. It's confusing because it seems to be first referring to the body of my options but then complains about the first argument should be a string or buffer.
{ code: undefined, reason: 'Argument error, options.body.' }
DOH!
_http_outgoing.js:454
throw new TypeError('first argument must be a string or Buffer');
^
TypeError: first argument must be a string or Buffer
I tried changing the url value to a string but that doesn't fix it.
Here is what my code looks like. As you can see I've logged out the reqOptions and have verified that the url is definitely being passed to the request.postso I am not sure what the problem is. Cheers for any help!
var reqOptions = {
url: options.host,
body: formData,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
};
console.log('CHECK OPTIONS :: ', reqOptions);
request.post(reqOptions, function (err, resp) {...}
If formData is an object, you'll probably want to use request's form: option instead of body:. That will both stringify the object and set the Content-Type header.
var reqOptions = {
url: options.host,
form: formData
};
console.log('CHECK OPTIONS :: ', reqOptions);
request.post(reqOptions, function (err, resp) {...});
The body: option expects a value that is either a string, Buffer, or ReadStream. Without using form:, you'll have to stringify the object yourself.
var qs = require('querystring');
var reqOptions = {
url: options.host,
form: qs.stringify(formData),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
};
add json : true
request({
url : url,
method :"POST",
headers : {
"content-type": "application/json",
},
body: body,
json: true
},