Fetch(): Request body malformed
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?
javascript json fetch-api
add a comment |
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?
javascript json fetch-api
Im not sure why you build the body as a template string. Try building it as an object and pass it to JSON.stringifyJSON.stringify([handleType]: abc)
– Alex Driaguine
Nov 12 '18 at 9:57
add a comment |
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?
javascript json fetch-api
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?
javascript json fetch-api
javascript json fetch-api
asked Nov 12 '18 at 8:54
wombat trashwombat trash
376
376
Im not sure why you build the body as a template string. Try building it as an object and pass it to JSON.stringifyJSON.stringify([handleType]: abc)
– Alex Driaguine
Nov 12 '18 at 9:57
add a comment |
Im not sure why you build the body as a template string. Try building it as an object and pass it to JSON.stringifyJSON.stringify([handleType]: abc)
– Alex Driaguine
Nov 12 '18 at 9:57
Im not sure why you build the body as a template string. Try building it as an object and pass it to JSON.stringify
JSON.stringify([handleType]: abc)
– Alex Driaguine
Nov 12 '18 at 9:57
Im not sure why you build the body as a template string. Try building it as an object and pass it to JSON.stringify
JSON.stringify([handleType]: abc)
– Alex Driaguine
Nov 12 '18 at 9:57
add a comment |
1 Answer
1
active
oldest
votes
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.
Thank you, the first solution did the trick! I didn't completely wrapped my mind around the explanation though:bodyOfFetch
, at declaration time, isn't a JSON string, it's just a string. I get that if you stringify it, it will introduce new data into the string, but shouldn't that extra data (JSON formatting, let's call it) be read correctly by the API?
– wombat trash
Nov 12 '18 at 10:32
JSON.stringify of a string will produce the json representation of a string, not of an object. The json representation of a stringabc
is"abc"
.
– dral
Nov 12 '18 at 10:45
Also, in the second solution, you should remove the quotation marks from your valueshandleType
andabc
– dral
Nov 12 '18 at 10:46
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53258660%2ffetch-request-body-malformed%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Thank you, the first solution did the trick! I didn't completely wrapped my mind around the explanation though:bodyOfFetch
, at declaration time, isn't a JSON string, it's just a string. I get that if you stringify it, it will introduce new data into the string, but shouldn't that extra data (JSON formatting, let's call it) be read correctly by the API?
– wombat trash
Nov 12 '18 at 10:32
JSON.stringify of a string will produce the json representation of a string, not of an object. The json representation of a stringabc
is"abc"
.
– dral
Nov 12 '18 at 10:45
Also, in the second solution, you should remove the quotation marks from your valueshandleType
andabc
– dral
Nov 12 '18 at 10:46
add a comment |
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.
Thank you, the first solution did the trick! I didn't completely wrapped my mind around the explanation though:bodyOfFetch
, at declaration time, isn't a JSON string, it's just a string. I get that if you stringify it, it will introduce new data into the string, but shouldn't that extra data (JSON formatting, let's call it) be read correctly by the API?
– wombat trash
Nov 12 '18 at 10:32
JSON.stringify of a string will produce the json representation of a string, not of an object. The json representation of a stringabc
is"abc"
.
– dral
Nov 12 '18 at 10:45
Also, in the second solution, you should remove the quotation marks from your valueshandleType
andabc
– dral
Nov 12 '18 at 10:46
add a comment |
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.
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.
answered Nov 12 '18 at 10:17
draldral
1563
1563
Thank you, the first solution did the trick! I didn't completely wrapped my mind around the explanation though:bodyOfFetch
, at declaration time, isn't a JSON string, it's just a string. I get that if you stringify it, it will introduce new data into the string, but shouldn't that extra data (JSON formatting, let's call it) be read correctly by the API?
– wombat trash
Nov 12 '18 at 10:32
JSON.stringify of a string will produce the json representation of a string, not of an object. The json representation of a stringabc
is"abc"
.
– dral
Nov 12 '18 at 10:45
Also, in the second solution, you should remove the quotation marks from your valueshandleType
andabc
– dral
Nov 12 '18 at 10:46
add a comment |
Thank you, the first solution did the trick! I didn't completely wrapped my mind around the explanation though:bodyOfFetch
, at declaration time, isn't a JSON string, it's just a string. I get that if you stringify it, it will introduce new data into the string, but shouldn't that extra data (JSON formatting, let's call it) be read correctly by the API?
– wombat trash
Nov 12 '18 at 10:32
JSON.stringify of a string will produce the json representation of a string, not of an object. The json representation of a stringabc
is"abc"
.
– dral
Nov 12 '18 at 10:45
Also, in the second solution, you should remove the quotation marks from your valueshandleType
andabc
– dral
Nov 12 '18 at 10:46
Thank you, the first solution did the trick! I didn't completely wrapped my mind around the explanation though:
bodyOfFetch
, at declaration time, isn't a JSON string, it's just a string. I get that if you stringify it, it will introduce new data into the string, but shouldn't that extra data (JSON formatting, let's call it) be read correctly by the API?– wombat trash
Nov 12 '18 at 10:32
Thank you, the first solution did the trick! I didn't completely wrapped my mind around the explanation though:
bodyOfFetch
, at declaration time, isn't a JSON string, it's just a string. I get that if you stringify it, it will introduce new data into the string, but shouldn't that extra data (JSON formatting, let's call it) be read correctly by the API?– wombat trash
Nov 12 '18 at 10:32
JSON.stringify of a string will produce the json representation of a string, not of an object. The json representation of a string
abc
is "abc"
.– dral
Nov 12 '18 at 10:45
JSON.stringify of a string will produce the json representation of a string, not of an object. The json representation of a string
abc
is "abc"
.– dral
Nov 12 '18 at 10:45
Also, in the second solution, you should remove the quotation marks from your values
handleType
and abc
– dral
Nov 12 '18 at 10:46
Also, in the second solution, you should remove the quotation marks from your values
handleType
and abc
– dral
Nov 12 '18 at 10:46
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53258660%2ffetch-request-body-malformed%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Im not sure why you build the body as a template string. Try building it as an object and pass it to JSON.stringify
JSON.stringify([handleType]: abc)
– Alex Driaguine
Nov 12 '18 at 9:57