Fetch(): Request body malformed










1















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?










share|improve this question






















  • 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
















1















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?










share|improve this question






















  • 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














1












1








1








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?










share|improve this question














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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










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.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

















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













1 Answer
1






active

oldest

votes


















0














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.






share|improve this answer























  • 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











  • Also, in the second solution, you should remove the quotation marks from your values handleType and abc

    – dral
    Nov 12 '18 at 10:46










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
);



);













draft saved

draft discarded


















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









0














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.






share|improve this answer























  • 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











  • Also, in the second solution, you should remove the quotation marks from your values handleType and abc

    – dral
    Nov 12 '18 at 10:46















0














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.






share|improve this answer























  • 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











  • Also, in the second solution, you should remove the quotation marks from your values handleType and abc

    – dral
    Nov 12 '18 at 10:46













0












0








0







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.






share|improve this answer













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.







share|improve this answer












share|improve this answer



share|improve this answer










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 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

















  • 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











  • Also, in the second solution, you should remove the quotation marks from your values handleType and abc

    – 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

















draft saved

draft discarded
















































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.




draft saved


draft discarded














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





















































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







Popular posts from this blog

Use pre created SQLite database for Android project in kotlin

Darth Vader #20

Ondo