JSONPlaceholder

https://jsonplaceholder.typicode.com/guide
Admin
JSONPlaceholder is a fake online REST API for testing and prototyping. It provides fake data for...
Tokens:1,395
Snippets:8
Trust Score:7.9
Update:1 year ago
Show doc for...
Tokens:
Raw
### Get a Resource with Fetch API

Source: https://jsonplaceholder.typicode.com/guide/index

Fetches a single resource (e.g., a post) from JSONPlaceholder using the Fetch API. It then parses the JSON response and logs it to the console. This is useful for retrieving a specific item by its ID.

```JavaScript
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then((response) => response.json())
  .then((json) => console.log(json));
```

--------------------------------

### List All Resources with Fetch API

Source: https://jsonplaceholder.typicode.com/guide/index

Fetches a list of all resources (e.g., all posts) from JSONPlaceholder using the Fetch API. The response is parsed as JSON and logged to the console. This is useful for retrieving collections of data.

```JavaScript
fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json())
  .then((json) => console.log(json));
```

--------------------------------

### List Nested Resources with Fetch API

Source: https://jsonplaceholder.typicode.com/guide/index

Fetches nested resources from JSONPlaceholder, such as comments for a specific post, by including the resource ID in the URL path. The Fetch API is used to retrieve and log these related resources.

```JavaScript
// This is equivalent to /comments?postId=1
fetch('https://jsonplaceholder.typicode.com/posts/1/comments')
  .then((response) => response.json())
  .then((json) => console.log(json));
```

--------------------------------

### Create a Resource with Fetch API

Source: https://jsonplaceholder.typicode.com/guide/index

Creates a new resource on JSONPlaceholder using the Fetch API with a POST request. It sends a JSON stringified object in the request body and sets the appropriate headers. The API fakes the creation and returns the created resource with an ID.

```JavaScript
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));
```

--------------------------------

### Delete a Resource with Fetch API

Source: https://jsonplaceholder.typicode.com/guide/index

Deletes a resource from JSONPlaceholder using the Fetch API with a DELETE request. This operation fakes the deletion and does not actually remove data from the server.

```JavaScript
fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE',
});
```

--------------------------------

### Patch a Resource with Fetch API

Source: https://jsonplaceholder.typicode.com/guide/index

Partially updates a resource on JSONPlaceholder using the Fetch API with a PATCH request. It sends only the fields to be updated in the JSON body. The API fakes the partial update and returns the resource with the modified fields.

```JavaScript
fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PATCH',
  body: JSON.stringify({
    title: 'foo',
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));
```

--------------------------------

### Update a Resource with Fetch API

Source: https://jsonplaceholder.typicode.com/guide/index

Updates an existing resource on JSONPlaceholder using the Fetch API with a PUT request. It sends the updated resource data in the request body and specifies the content type. The API simulates the update and returns the modified resource.

```JavaScript
fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PUT',
  body: JSON.stringify({
    id: 1,
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));
```

--------------------------------

### Filter Resources by Query Parameter with Fetch API

Source: https://jsonplaceholder.typicode.com/guide/index

Filters a list of resources on JSONPlaceholder by appending query parameters to the URL, such as filtering posts by a specific user ID. The Fetch API is used to make the request and log the filtered results.

```JavaScript
// This will return all the posts that belong to the first user
fetch('https://jsonplaceholder.typicode.com/posts?userId=1')
  .then((response) => response.json())
  .then((json) => console.log(json));
```
Tokens:
Raw