Question

98

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

rated 0 times [ 104] [ 6] / answers: 1 / hits: 14836 / 5 Years ago, fri, may 31, 2019, 12:00:00

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(`http://localhost:3001/api/getCardsForDeck`, {

      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:UsersUserprojectswebappdeck-editorbackendnode_modulesbody-parserlibtypesjson.js:89:19)

[0]     at C:UsersUserprojectswebappdeck-editorbackendnode_modulesbody-parserlibread.js:121:18

[0]     at invokeCallback (C:UsersUserprojectswebappdeck-editorbackendnode_modulesraw-bodyindex.js:224:16)

[0]     at done (C:UsersUserprojectswebappdeck-editorbackendnode_modulesraw-bodyindex.js:213:7)

[0]     at IncomingMessage.onEnd (C:UsersUserprojectswebappdeck-editorbackendnode_modulesraw-bodyindex.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:UsersUserprojectswebappdeck-editorbackendnode_modulesbody-parserlibtypesjson.js:89:19)

[0]     at C:UsersUserprojectswebappdeck-editorbackendnode_modulesbody-parserlibread.js:121:18

[0]     at invokeCallback (C:UsersUserprojectswebappdeck-editorbackendnode_modulesraw-bodyindex.js:224:16)

[0]     at done (C:UsersUserprojectswebappdeck-editorbackendnode_modulesraw-bodyindex.js:213:7)

[0]     at IncomingMessage.onEnd (C:UsersUserprojectswebappdeck-editorbackendnode_modulesraw-bodyindex.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)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sandra

Add To Favorites

Follow

Total Points: 708

Total Questions: 100

Total Answers: 84

Location: Bosnia and Herzegovina

Member since Thu, Jun 24, 2021

3 Years ago

sandra questions

1 NestJS/TypeORM: Cannot read property 'createQueryBuilder' of undefined

Mon, Nov 16, 20, 00:00, 4 Years ago

1 How to pass an array in query parameter reactjs

Tue, Jun 30, 20, 00:00, 4 Years ago

1 Firebase popup signin popup-closed-by-user error

Sun, May 31, 20, 00:00, 4 Years ago

1 How to test a component with the < Router> tag inside of it?

Wed, May 20, 20, 00:00, 4 Years ago

1 How to validate a user's birth date in JavaScript with a Regular Expression?

Thu, Apr 25, 19, 00:00, 5 Years ago

View All

answered 5 Years ago beatrices · Accepted Answer

You seem to be expecting http://localhost:3001/api/getCardsForDeck 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:

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

fetch(`http://localhost:3001/api/getCardsForDeck`, {

  method: PUT,

  body: stringifiedDeck,

  headers: {                              // ***

    Content-Type: application/json    // ***

  }                                       // ***

})

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(`http://localhost:3001/api/getCardsForDeck`, {

  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

});