json-server

RESTful APIs for FreeEueung Mulyana

http://eueung.github.io/js/json-serverJS CodeLabs | Attribution-ShareAlike CC BY-SA

1 / 20

Agenda

json-server

Angular.JS Todo App

2 / 20

json-server

3 / 20

json-server$> json-server --watch db-01.json

\{̂_̂}/ hi!

Loading db-01.json Done

Resources http://localhost:3000/posts http://localhost:3000/comments http://localhost:3000/albums http://localhost:3000/photos http://localhost:3000/users http://localhost:3000/todos

Home http://localhost:3000

Type s + enter at any time to create a snapshot of the database Watching...

Sample GET Reqs

http://localhost:3000/users?id=1&id=2

http://localhost:3000/users/1/postshttp://localhost:3000/posts?userId=1

http://localhost:3000/posts/1/commentshttp://localhost:3000/posts/11/comments?_limit=2

http://localhost:3000/todos?userId_lte=2

http://localhost:3000/users/1/albums?_limit=2http://localhost:3000/photos?albumId_lte=2

http://localhost:3000/albums/2/photos?_limit=3

4 / 20

5 / 20

db-01.json

{ "posts": [ { "userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit" "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" }, ... ], "comments": [ { "postId": 1, "id": 1, "name": "id labore ex et quam laborum", "email": "Eliseo@gardner.biz", "body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium" }, ... ], "albums": [ { "userId": 1, "id": 1, "title": "quidem molestiae enim" }, ... ],}

"photos": [ { "albumId": 1, "id": 1, "title": "accusamus beatae ad facilis cum similique qui sunt" "url": "http://placehold.it/600/92c952", "thumbnailUrl": "http://placehold.it/150/30ac17" }, ... ], "users": [ { "id": 1, "name": "Leanne Graham", "username": "Bret", "email": "Sincere@april.biz", "address": { ... } }, "phone": "1-770-736-8031 x56442", "website": "hildegard.org", "company": { ... } }, ... ], "todos": [ { "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false }, ... ]

6 / 20

Let's Do This 

HTTP Method URI Endpoint Action

GET /users users Retrieve list of users

POST /users users Create a new user

GET /users/:id user Retrieve a user

PUT /users/:id user Update an existing user

PATCH /users/:id user Patch an existing user

DELETE /users/:id user Delete a user

7 / 20

db-02.json 

{ "users" : [ { "name" : "unyil", "password" : "111", "job" : "coder", "id": 1 }, { "name" : "ucrit", "password" : "222", "job" : "designer", "id": 2 }, { "name" : "usro", "password" : "333", "job" : "opisboy", "id": 3 } ] }

 

json-server --watch db-02.json

8 / 20

GET /users

$.ajax('http://localhost:3000/users', { method: 'GET'}).then(function(data) { console.log(data);});

[Object, Object, Object]

POST /users

$.ajax('http://localhost:3000/users', { method: 'POST', data: { name: 'otong', password: 'abc', job: 'nguseup' }}).then(function(data) { console.log(data);});

Object {name: "otong", password: "abc", job: "nguseup", id:

9 / 20

GET /users/1

$.ajax('http://localhost:3000/users/1', { method: 'GET'}).then(function(data) { console.log(data);});

Object {name: "unyil", password: "111", job: "coder", id: 1

GET /users/10

GET http://localhost:3000/users/10 404 (Not Found)

10 / 20

PUT /users/4

$.ajax('http://localhost:3000/users/4', { method: 'PUT', data: { name: 'totong', job: 'raja nguseup' }}).then(function(data) { console.log(data);});

Object {name: "totong", job: "raja nguseup", id: 4}

PATCH /users/4

$.ajax('http://localhost:3000/users/4', { method: 'PATCH', data: { password: 'tonghilap' }}).then(function(data) { console.log(data);});

Object {name: "totong", job: "raja nguseup", id: 4, password:

11 / 20

DELETE /users/4

$.ajax('http://localhost:3000/users/4', { method: 'DELETE'});

DELETE /users/10

DELETE http://localhost:3000/users/10 404 (Not Found)

12 / 20

Angular.JS Todo AppExample #6 @ Angular.JS Tutorial

13 / 20

The APIs 

HTTP Method URI Endpoint Action

GET /todos todos Retrieve list of todos

POST /todos todos Create a new todo

PATCH /todos/:id todo Patch an existing todo

14 / 20

db-03.json 

{ "users" : [ { "name" : "unyil", "password" : "111", "job" : "coder", "id": 1 }, { "name" : "ucrit", "password" : "222", "job" : "designer", "id": 2 }, { "name" : "usro", "password" : "333", "job" : "opisboy", "id": 3 } ], "todos" : [ { "userId": 1, "id": 1, "done": false, "text" : "Todo Unyil 1111" }, { "userId": 1, "id": 2, "done": false, "text" : "Todo Unyil 2222" }, { "userId": 1, "id": 3, "done": false, "text" : "Todo Unyil 3333" } ] }

 

json-server --watch db-03.json

15 / 20

todoList.todos = [];

$http.get('http://localhost:3000/todos') .success(function(data) { todoList.todos = data; console.log(data); }) .error(function(data) { console.log('Error: ' + data); });

todoList.addTodo = function() { $http.post('http://localhost:3000/todos', JSON.stringify({text:todoList.todoText, done: .success(function(data) { todoList.todos.push({text:data.text, done:data.done, id: data.id}); todoList.todoText = ''; console.log(data); }) .error(function(data) { console.log('Error: ' + data); }); };

angular-todo.js todoList.updDone = function(idx){ $http.patch('http://localhost:3000/todos/' + todoList.todos[idx].id, .success(function(data) { console.log(data); }) .error(function(data) { console.log('Error: ' + data); }); };

16 / 20

angular-todo.html

<!doctype html>

<head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" <script src="angular-todo.js"></script> <link rel="stylesheet" href="angular-todo.css"> </head> <body> <h2>Todo</h2> <div ng-controller="TodoListController as todoList"> <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining [ <a href="" ng-click="todoList.archive()">archive</a <ul class="unstyled"> <input type="checkbox" ng-model="todo.done" ng-click <span class="done-{{todo.done}}">{{todo.text}}</span </li> </ul> <form ng-submit="todoList.addTodo()"> <input type="text" ng-model="todoList.todoText" size placeholder="add new todo here"> <input class="btn-primary" type="submit" value="add" </form> </div> </body></html>

<html ng-app="todoApp">

<li ng-repeat="todo in todoList.todos track by $index"

17 / 20

Object {text: "Lagi-lagi makan", done: false, id: 6}Object {text: "Lagi-lagi makan", done: true, id: 6}

18 / 20

References1. typicode/json-server2. typicode/lowdb3. typicode/jsonplaceholder

19 / 20

ENDEueung Mulyana

http://eueung.github.io/js/json-serverJS CodeLabs | Attribution-ShareAlike CC BY-SA

20 / 20