{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/response-json-in-JavaScript-fetch-api/", "result": {"data":{"markdownRemark":{"html":"

In the App component below, we are making a GET request to {JSON} placeholder, a fake REST API using the fetch API, which is a simple interface for fetching resources.

\n
import React, { useState, useEffect } from "react"\n\nconst App = () => {\n  const [contacts, setContacts] = useState([])\n\n  useEffect(() => {\n    try {\n      ;(async () => {\n        const response = await fetch(\n          "https://jsonplaceholder.typicode.com/users"\n        )\n        const data = await response.json()\n        data && setContacts(data)\n      })()\n    } catch (error) {\n      console.log(error)\n    }\n  }, [])\n\n  return (\n    <div className="m-5">\n      <h2>Contacts List</h2>\n      <ul>\n        {contacts.map(contact => (\n          <li key={contact.name}>{contact.name}</li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\nexport default App
\n

Line 9: fetch returns a promise that resolves to a Response object.

\n
\n

Note: response.json() returns a promise, because we receive the response as soon as all the headers have arrived. Calling json() gets us another promise for the body of the HTTP response that is yet to be loaded.

\n
\n

Line 12: We use the json() method, which takes JSON as input and parses it to produce a JavaScript object.

\n

Syntax

\n
response.json().then(data => {// do something with your data})
\n","frontmatter":{"title":"Response.json() in JavaScript Fetch API","date":"2021-07-05"}}},"pageContext":{"slug":"/response-json-in-JavaScript-fetch-api/","prev":{"fields":{"slug":"/create-a-dropdown-in-React/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/object-and-array-equality-in-javascript/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}