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.
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.
- 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
- Compatible with Backbone, AngularJS, Ember, ...
Let's start with resources, JSONPlaceholder provides the usual suspects:
- Posts https://jsonplaceholder.typicode.com/posts/1
- Comments https://jsonplaceholder.typicode.com/comments/1
- Albums https://jsonplaceholder.typicode.com/albums/1
- Photos https://jsonplaceholder.typicode.com/photos/1
- Users https://jsonplaceholder.typicode.com/users/1
- Todos https://jsonplaceholder.typicode.com/todos/1
Here's some code using jQuery showing what can be done with JSONPlaceholder. Since GitHub loads jQuery, you can simply copy and paste these examples in a console.
$.ajax('https://jsonplaceholder.typicode.com/posts/1', {
method: 'GET'
}).then(function(data) {
console.log(data);
});$.ajax('https://jsonplaceholder.typicode.com/posts', {
method: 'GET'
}).then(function(data) {
console.log(data);
});// POST adds a random id to the object sent
$.ajax('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
data: {
title: 'foo',
body: 'bar',
userId: 1
}
}).then(function(data) {
console.log(data);
});
/* 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.
$.ajax('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PUT',
data: {
id: 1,
title: 'foo',
body: 'bar',
userId: 1
}
}).then(function(data) {
console.log(data);
});
/* will return
{
id: 1
title: 'foo',
body: 'bar',
userId: 1
}
*/$.ajax('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PATCH',
data: {
title: 'foo'
}
}).then(function(data) {
console.log(data);
});
/* 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.
$.ajax('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.
Basic filtering is supported through query parameters.
// Will return all the posts that belong to the first user
$.ajax('https://jsonplaceholder.typicode.com/posts?userId=1').then(function(data) {
console.log(data);
});One level of nested route is available.
$.ajax('https://jsonplaceholder.typicode.com/posts/1/comments').then(function(data) {
console.log(data);
});
// Which is equivalent to /comments?postId=1Here's the list of available nested routes:
- https://jsonplaceholder.typicode.com/posts/1/comments
- https://jsonplaceholder.typicode.com/albums/1/photos
- https://jsonplaceholder.typicode.com/users/1/albums
- https://jsonplaceholder.typicode.com/users/1/todos
- https://jsonplaceholder.typicode.com/users/1/posts
$.ajax('https://jsonplaceholder.typicode.com/posts/1', {
dataType: 'jsonp'
}).then(function(data) {
console.log(data);
});