Skip to content

Latest commit

 

History

History
189 lines (147 loc) · 4.76 KB

README.md

File metadata and controls

189 lines (147 loc) · 4.76 KB
Raw

JSONPlaceholder

JSONPlaceholder is a simple fake REST API for testing and prototyping.

It's like an image placeholder but for web developers.

JSONPlaceholder is powered by JSON Server.

Why?

Most of the time when trying a new library, hacking a prototype or following a tutorial, I found myself in need of some data.

I didn't like the idea of using some public API because I had the feeling that I was spending more time registering a client and understanding a complex API than focusing on my task.

But I liked the idea of image placeholders for web designers. So I decided to code a little Express server inspired by that and here is JSONPlaceholder.

You can find it running here and are free to use it in your developments: https://jsonplaceholder.typicode.com.

I hope you will find it useful.

Features

  • No registration
  • Zero-config
  • Basic API
  • "Has many" relationships
  • Filters and nested resources
  • Cross-domain (CORS and JSONP)
  • Supports GET, POST, PUT, PATCH, DELETE and OPTIONS verbs
  • HTTP or HTTPS
  • Compatible with React, Angular, Vue, Ember, ...

Available resources

Let's start with resources, JSONPlaceholder provides the usual suspects:

How to

Here's some code using Fetch API showing what can be done with JSONPlaceholder.

Showing a resource

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

Listing resources

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

Creating a resource

// POST adds a random id to the object sent
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))

/* will return
{
  id: 101,
  title: 'foo',
  body: 'bar',
  userId: 1
}
*/

Note: the resource will not be really created on the server but it will be faked as if.

Updating a resource

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))

/* will return
{
  id: 1,
  title: 'foo',
  body: 'bar',
  userId: 1
}
*/
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))

/* will return
{
  id: 1,
  title: 'foo',
  body: 'quia et suscipit [...]',
  userId: 1
}
*/

Note: the resource will not be really updated on the server but it will be faked as if.

Deleting a resource

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

Note: the resource will not be really deleted on the server but it will be faked as if.

Filtering resources

Basic filtering is supported through query parameters.

// 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))

Nested resources

One level of nested route is available.

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

Here's the list of available nested routes: