How do I send an array with fetch? (Javascript)

I'm trying to send an array using fetch that looks like this:

{"cards":[[189,2],[211,2],[238,2],[778,2],[985,2],[1008,2],[1073,2],[1171,2],[48886,2],[49161,2],[49164,2],[49184,1],[49356,2],[50372,2],[51722,1],[52422,2]],"heroes":[1066],"format":2} 

Here is what I am trying:

 getCardsForDeck = deck => { var stringifiedDeck = JSON.stringify(deck); console.log("stringifiedDeck:" + stringifiedDeck); fetch(` { method: "PUT", body: stringifiedDeck }) .then(cards => cards.json()) .then(res => this.setState({ cards: res.cards })); }; 

I am getting an error though:

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0 

How do I send this data if not with JSON.stringify() or do I have to edit the data to remove the brackets?

Upon checking the api in the network tab it gives me this:

 SyntaxError: Unexpected token o in JSON at position 1 [0] at JSON.parse (<anonymous>) [0] at parse (C:\Users\User\projects\webapp\deck-editor\backend\node_modules\body-parser\lib\types\json.js:89:19) [0] at C:\Users\User\projects\webapp\deck-editor\backend\node_modules\body-parser\lib\read.js:121:18 [0] at invokeCallback (C:\Users\User\projects\webapp\deck-editor\backend\node_modules\raw-body\index.js:224:16) [0] at done (C:\Users\User\projects\webapp\deck-editor\backend\node_modules\raw-body\index.js:213:7) [0] at IncomingMessage.onEnd (C:\Users\User\projects\webapp\deck-editor\backend\node_modules\raw-body\index.js:273:7) [0] at IncomingMessage.emit (events.js:194:15) [0] at endReadableNT (_stream_readable.js:1125:12) [0] at process._tickCallback (internal/process/next_tick.js:63:19) [0] SyntaxError: Unexpected token o in JSON at position 1 [0] at JSON.parse (<anonymous>) [0] at parse (C:\Users\User\projects\webapp\deck-editor\backend\node_modules\body-parser\lib\types\json.js:89:19) [0] at C:\Users\User\projects\webapp\deck-editor\backend\node_modules\body-parser\lib\read.js:121:18 [0] at invokeCallback (C:\Users\User\projects\webapp\deck-editor\backend\node_modules\raw-body\index.js:224:16) [0] at done (C:\Users\User\projects\webapp\deck-editor\backend\node_modules\raw-body\index.js:213:7) [0] at IncomingMessage.onEnd (C:\Users\User\projects\webapp\deck-editor\backend\node_modules\raw-body\index.js:273:7) [0] at IncomingMessage.emit (events.js:194:15) [0] at endReadableNT (_stream_readable.js:1125:12) [0] at process._tickCallback (internal/process/next_tick.js:63:19) 

1 Answer

You seem to be expecting to send JSON back after you send JSON to it. Most likely it's responding with HTML, not JSON.

There are two other errors in that code:

1. You need to say what you're sending, since it's not the default URI-encoded data:

   fetch(` { method: "PUT", body: stringifiedDeck, headers: { // *** "Content-Type": "application/json" // *** } // *** }) 

2. You need to check the status of the response. (Everyone misses this out.) The simplest way is to check the ok flag on the response:

   fetch(` { method: "PUT", body: stringifiedDeck, headers: { "Content-Type": "application/json" } }) .then(response => { if (!response.ok) { // *** throw new Error("HTTP error " + response.status); // *** } // *** // ...use `response.json`, `response.text`, etc. here }) .catch(error => { // ...handle/report error });