Receive JSON content of Fetch API Post call

Question

I am new to React and I have a chat UI in which I am trying to test an API call from a service. Please assume that the call itself have the correct parameters, and even if not I want to see the error JSON response and I am just getting a blank message in the chat as a response to the user message. The call working through Postman app in chrome but when trying to assign the call result to var in react it doesn't present the JSON response value when trying to post the message through the UI chat.

This is the function, the user message transfered to this function and then an answer should appear right after via the fetched API request:

submitMessage(e) { e.preventDefault(); var s = fetch('https://***', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': '****', }, body: JSON.stringify({ inputText: 'hi' }) }); this.setState({ chats: this.state.chats.concat([ { username: "newUser", content: <p>{ReactDOM.findDOMNode(this.refs.msg).value}</p> }, { username: "responsePlace", content: s } ]) }); }

Fetch returns a promise, you then have to do something with it. fetch(...).then(response => /* do something with response */) — wdm
– wdm, Commented Dec 10, 2018 at 20:56
Thank you, how can I then send the response through the content field of the "reponsePlace" user ? when adding .then(response => response.json()) to the fetch and leaving the rest as it is there is an error: "Invariant Violation Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.". That's while assigning normal text string to var s, presents the message fine. — Ben J
– Ben J, Commented Dec 11, 2018 at 0:55
If you do fetch(...).then(r => r.json()).then(r => console.log(r)) what does the response (r) look like? — wdm
– wdm, Commented Dec 11, 2018 at 18:52
@wdm Thanks I do get the requirde JSON.. I need to extract the value of a field by the name of "message" and place it in the content field of the username "reponsePlace". How can I do that ? I tried a couple of things but I ended up with errors.. — Ben J
– Ben J, Commented Dec 11, 2018 at 20:04
You'll need to iterate over the chats array to find the proper object. Something similar to this: jsfiddle.net/wfqh9r1e — wdm
– wdm, Commented Dec 12, 2018 at 21:04

Chriss Hd · Accepted Answer · 2018-12-10 21:14:10Z

fetch is a javascript Promise therefore it needs to be resolved using then

fetch(...) .then(response => response.json()) // resolves json content of the response .then(data => console.log(data)) // your actual data as a javascript object .catch(ex => console.log(ex)) // exception handler in case anything goes wrong in the fetch

Collectives™ on Stack Overflow

Receive JSON content of Fetch API Post call

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related