Permalänk

HTTP Request JSON

Hej! Nånstans i min kod blir det fel när jag försöker skicka information till servern genom en Http request med 'POST' method. Problemet verkar vara att det jag skickar inte är i json-format eller att servern inte uppfattar det som json. Så här ser min kod ut hittills, är det någon som ser vart problemet ligger?

this._answer = this.shadowRoot.querySelector('input[type="text"]')

async sendAnswer () {

this._submit.addEventListener('click', ev => {
let submittedAnswer = this._answer.value
if(submittedAnswer == '2') {
fetch('http://testurl.se/answer/1',
{
method: 'POST',
body: JSON.stringify(submittedAnswer),
headers: {
'Content-Type': 'application/json'
}
}) .then(function(response){
console.log(response.json())
})
} else { console.log('wrong answer') }
})
}

Permalänk
Medlem

Du behöver nog ta reda på vilken struktur POST-endpointen förväntar sig. Att köra JSON.stringify på '2' åstadkommer inget, det kommer fortfarande vara lika med '2', vilket inte är JSON. JSON.stringify använder du i första hand för att göra om javascript-objekt till JSON-sträng, ex.:

{
value: '2'
}

blir:

"{\"value\":\"2\"}"

Jag gissar att endpointen du försöker posta mot förväntar sig att datan kommer in i en viss struktur. Är det en endpoint som du själv har skapat och har kontroll över?

Visa signatur

Fractal Design Define R4 / Asus ROG STRIX B550-F Gaming / Ryzen 5 5600X / Noctua NH-U12S / Powercolor Radeon 6800 XT (reference) / EVGA Supernova G2 750W / 2x8GB Corsair Vengeance DDR4 CL16 3200Mhz / 24" 144hz AOC 24G2U

Permalänk
Medlem
Skrivet av Bonside:

Att köra JSON.stringify på '2' åstadkommer inget, det kommer fortfarande vara lika med '2', vilket inte är JSON.

Att köra JSON.stringify2 eller '2' är mycket riktigt ovanligt, och förmodligen är det precis som du säger det som är problemet. Men, för att vara petig, så åstadkommer visst JSON.stringify något både för tal och strängar:

JSON.stringify(2) === '2' JSON.stringify('2') === `"2"`

Notera hur input inte är lika med output, och att vi i båda fallen producerat giltig JSON. JSON är null, booleans, tal, strängar, samt arrays och objekt av JSON – se json.org.

Permalänk
Medlem
Skrivet av lydell:

Att köra JSON.stringify2 eller '2' är mycket riktigt ovanligt, och förmodligen är det precis som du säger det som är problemet. Men, för att vara petig, så åstadkommer visst JSON.stringify något både för tal och strängar:

JSON.stringify(2) === '2' JSON.stringify('2') === `"2"`

Det har du såklart rätt i, slarvigt uttryckt av mig.

Skrivet av lydell:

Notera hur input inte är lika med output, och att vi i båda fallen producerat giltig JSON. JSON är null, booleans, tal, strängar, samt arrays och objekt av JSON – se json.org.

Att JSON-värden kan vara alla de typer du beskriver visste jag, visste dock inte att en giltig JSON-text kan vara enbart ett värde utan att vara del av ett objekt eller en array. Var tvungen att läsa på lite, hittade denna tråden som var intressant på ämnet: https://stackoverflow.com/questions/18419428/what-is-the-mini...

Verkar egentligen inte finnas en officiellt standard, och även om det initiala förslaget för JSON inte verkar vara överens med det du skriver så verkar åtminstone senare RFC vara det. Så jag viker mig i frågan!

Jag tror dock fortfarande att min fråga är relevant, beroende på om TS själv ansvarar för POST-endpointen han går mot eller ej. I min erfarnhet vill en enpoint oftast ha en parametriserad payload, men det beror ju såklart på hur den är uppbyggd.

Visa signatur

Fractal Design Define R4 / Asus ROG STRIX B550-F Gaming / Ryzen 5 5600X / Noctua NH-U12S / Powercolor Radeon 6800 XT (reference) / EVGA Supernova G2 750W / 2x8GB Corsair Vengeance DDR4 CL16 3200Mhz / 24" 144hz AOC 24G2U

Permalänk
Skrivet av Bonside:

Du behöver nog ta reda på vilken struktur POST-endpointen förväntar sig. Att köra JSON.stringify på '2' åstadkommer inget, det kommer fortfarande vara lika med '2', vilket inte är JSON. JSON.stringify använder du i första hand för att göra om javascript-objekt till JSON-sträng, ex.:

{
value: '2'
}

blir:

"{\"value\":\"2\"}"

Jag gissar att endpointen du försöker posta mot förväntar sig att datan kommer in i en viss struktur. Är det en endpoint som du själv har skapat och har kontroll över?

Det är inte mig egen endpoint, så jag är inte riktigt säker på hur jag tar reda på i vilken struktur jag bör skicka min data.
Iallafall så ändrade jag 'submittedAnswer' till ett objekt som du beskrev och anropade submittedAnswer.value. Men jag får fortfarande felmeddelande 400 'bad request' i konsollen. Har du nån misstanke om vad det kan bero på?

Permalänk
Medlem
Skrivet av Trainee352:

Det är inte mig egen endpoint, så jag är inte riktigt säker på hur jag tar reda på i vilken struktur jag bör skicka min data.
Iallafall så ändrade jag 'submittedAnswer' till ett objekt som du beskrev och anropade submittedAnswer.value. Men jag får fortfarande felmeddelande 400 'bad request' i konsollen. Har du nån misstanke om vad det kan bero på?

Jag menade inte att objektet jag visade var en lösning på ditt problem, det var bara ett exempel på hur stringify hanterar JS-objekt. Ledsen om det var otydligt.

Går inte att svara på vad 400-felet beror på utan att veta detaljerna, men i generella termer så innebär det att du anropar servern på ett sätt som den inte förväntar sig, och det kan mycket väl innebära att payloaden, dvs. datan du skickar, inte är strukturerad på det sättet som endpointen specificerar. Är det här ett privat projekt du sitter med, en skoluppgift eller något annat? Oavsett så är bottomline att du måste veta vad servern förväntar sig för struktur på datan för att du ska kunna se till att du skickar in rätt.

För tydlighetens skull så kan 400-felet också bero på något helt annat, det är upp till implementationen av APIt att avgöra vad som är en godkänd request och vad som inte är det.

Typo
Visa signatur

Fractal Design Define R4 / Asus ROG STRIX B550-F Gaming / Ryzen 5 5600X / Noctua NH-U12S / Powercolor Radeon 6800 XT (reference) / EVGA Supernova G2 750W / 2x8GB Corsair Vengeance DDR4 CL16 3200Mhz / 24" 144hz AOC 24G2U