Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@typicode
typicode committed May 6, 2020
1 parent 90bb0b4 commit 893391d
Show file tree
Hide file tree
Showing 5 changed files with 238 additions and 198 deletions.
138 changes: 72 additions & 66 deletions public/guide.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,21 @@
crossorigin="anonymous"
/>
<script>
hljs.initHighlightingOnLoad();
hljs.initHighlightingOnLoad()
</script>
<title>JSONPlaceholder - Fake online REST API for developers</title>
</head>

<body>
<header>
<div class="announcement">
This service is maintained and provided for free, please consider
supporting it on
<a href="https://github.com/users/typicode/sponsorship"
>GitHub Sponsors</a
>
❤️
</div>
<nav class="container">
<ul>
<li><a href="/">JSONPlaceholder</a></li>
Expand All @@ -40,20 +48,14 @@
</li>
</ul>
</nav>
<a
href="https://github.com/users/typicode/sponsorship"
class="announcement"
>
<i class="fab fa-github-alt"></i> Announcement: You can now support
JSONPlaceholder on GitHub Sponsors!
</a>
</header>

<div class="container">
<h2 id="guide">Guide</h2>
<p>You can use JSONPlaceholder with any type of project that needs to get JSON data (React, Vue, Angular, Node, Rails, Swift, Android, …).</p>
<p><main></p>
<h2 id="guide">Guide</h2>
<p>You can use JSONPlaceholder with any type of project that needs to get JSON data (React, Vue, Node, Rails, Swift, Android, …).</p>
<p>Below you'll find examples using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a>. You can copy paste them in your browser Console to quickly test JSONPlaceholder.</p>
<h2 id="getaresource">Get a resource</h2>
<h3 id="getaresource">Get a resource</h3>
<pre><code class="js language-js">fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response =&gt; response.json())
.then(json =&gt; console.log(json))
Expand All @@ -68,7 +70,7 @@ <h2 id="getaresource">Get a resource</h2>
</code></pre>
<div id="codefund"><!-- fallback content --></div>
<script src="https://codefund.io/properties/338/funder.js" async="async"></script>
<h2 id="listallresources">List all resources</h2>
<h3 id="listallresources">List all resources</h3>
<pre><code class="js language-js">fetch('https://jsonplaceholder.typicode.com/posts')
.then(response =&gt; response.json())
.then(json =&gt; console.log(json))
Expand All @@ -80,7 +82,7 @@ <h2 id="listallresources">List all resources</h2>
{ id: 100, title: '[...]' /* ... */ }
]
</code></pre>
<h2 id="createaresource">Create a resource</h2>
<h3 id="createaresource">Create a resource</h3>
<pre><code class="js language-js">fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
Expand All @@ -104,7 +106,8 @@ <h2 id="createaresource">Create a resource</h2>
}
</code></pre>
<p>Important: the resource will not be really created on the server but it will be faked as if. In other words, if you try to access a post using 101 as an id, you'll get a 404 error.</p>
<h2 id="updatearesource">Update a resource</h2>
<h3 id="updatearesource">Update a resource</h3>
<h4 id="withput">With PUT</h4>
<pre><code class="js language-js">fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PUT',
body: JSON.stringify({
Expand All @@ -128,6 +131,7 @@ <h2 id="updatearesource">Update a resource</h2>
userId: 1
}
</code></pre>
<h4 id="withpatch">With PATCH</h4>
<pre><code class="js language-js">fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PATCH',
body: JSON.stringify({
Expand All @@ -149,20 +153,20 @@ <h2 id="updatearesource">Update a resource</h2>
}
</code></pre>
<p>Important: the resource will not be really updated on the server but it will be faked as if. </p>
<h2 id="deletearesource">Delete a resource</h2>
<h3 id="deletearesource">Delete a resource</h3>
<pre><code class="js language-js">fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'DELETE'
})
</code></pre>
<p>Important: the resource will not be really deleted on the server but it will be faked as if. </p>
<h2 id="filteringresources">Filtering resources</h2>
<h3 id="filterresources">Filter resources</h3>
<p>Basic filtering is supported through query parameters.</p>
<pre><code class="js language-js">// Will return all the posts that belong to the first user
fetch('https://jsonplaceholder.typicode.com/posts?userId=1')
.then(response =&gt; response.json())
.then(json =&gt; console.log(json))
</code></pre>
<h2 id="nestedresources">Nested resources</h2>
<h3 id="nestedresources">Nested resources</h3>
<p>One level of nested route is available.</p>
<pre><code class="js language-js">// Equivalent to /comments?postId=1
fetch('https://jsonplaceholder.typicode.com/posts/1/comments')
Expand All @@ -177,20 +181,22 @@ <h2 id="nestedresources">Nested resources</h2>
<li><a href="https://jsonplaceholder.typicode.com/users/1/todos">https://jsonplaceholder.typicode.com/users/1/todos</a></li>
<li><a href="https://jsonplaceholder.typicode.com/users/1/posts">https://jsonplaceholder.typicode.com/users/1/posts</a></li>
</ul>
<p></main></p>
</div>

<!-- Footer -->
<footer>
<div class="container">
<div style="margin-bottom: 2rem">
<div style="margin-bottom: 2rem;">
<!-- <a href="https://www.patreon.com/bePatron?c=784328"> -->
<!-- <img -->
<!-- src="https://c5.patreon.com/external/logo/[email protected]" -->
<!-- width="217" -->
<!-- /> -->
<!-- </a> -->
<a href="https://github.com/users/typicode/sponsorship">
<i class="fab fa-github-alt"></i> Sponsor this project on GitHub
<i class="fab fa-github-alt"></i>
<strong>Sponsor this project on GitHub</strong>
</a>
</div>
<div>
Expand All @@ -204,77 +210,77 @@ <h2 id="nestedresources">Nested resources</h2>

<!-- Analytics -->
<script>
(function(i, s, o, g, r, a, m) {
i["GoogleAnalyticsObject"] = r;
(i[r] =
;(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r
;(i[r] =
i[r] ||
function() {
(i[r].q = i[r].q || []).push(arguments);
function () {
;(i[r].q = i[r].q || []).push(arguments)
}),
(i[r].l = 1 * new Date());
(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m);
(i[r].l = 1 * new Date())
;(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0])
a.async = 1
a.src = g
m.parentNode.insertBefore(a, m)
})(
window,
document,
"script",
"//www.google-analytics.com/analytics.js",
"ga"
);
ga("create", "UA-44497010-1", "typicode.com");
ga("send", "pageview");
var trackOutboundLink = function(url) {
ga("send", "event", "outbound", "click", url, {
transport: "beacon"
});
};
'script',
'//www.google-analytics.com/analytics.js',
'ga',
)
ga('create', 'UA-44497010-1', 'typicode.com')
ga('send', 'pageview')
var trackOutboundLink = function (url) {
ga('send', 'event', 'outbound', 'click', url, {
transport: 'beacon',
})
}
</script>

<script src="//cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
<script>
// Use http or https based on location.protocol
var example = document.getElementById("example");
var example = document.getElementById('example')
example.textContent = example.textContent.replace(
"http:",
location.protocol
);
'http:',
location.protocol,
)

// Highlight result element
var result = document.getElementById("result");
hljs.highlightBlock(result);
var result = document.getElementById('result')
hljs.highlightBlock(result)

// Run example
var runButton = document.getElementById("run-button");
runButton.onclick = function() {
var root = location.protocol + "//jsonplaceholder.typicode.com";
var runMessage = document.getElementById("run-message");
var runButton = document.getElementById('run-button')
runButton.onclick = function () {
var root = location.protocol + '//jsonplaceholder.typicode.com'
var runMessage = document.getElementById('run-message')

// Hide or disable things during API call
runButton.disabled = true;
runMessage.style.opacity = 0;
result.style.opacity = 0;
runButton.disabled = true
runMessage.style.opacity = 0
result.style.opacity = 0

fetch("https://jsonplaceholder.typicode.com/todos/1")
.then(response => response.json())
.then(json => {
var str = JSON.stringify(json, null, "\t");
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then((response) => response.json())
.then((json) => {
var str = JSON.stringify(json, null, '\t')

// Format result
result.innerHTML = str
.replace(/\n/g, "<br/>")
.replace(/\\n/g, " ")
.replace(/\t/g, "&nbsp;&nbsp;");
.replace(/\n/g, '<br/>')
.replace(/\\n/g, ' ')
.replace(/\t/g, '&nbsp;&nbsp;')

hljs.highlightBlock(result);
hljs.highlightBlock(result)

// Show and enable things after API call
runButton.disabled = false;
runMessage.style.opacity = 1;
result.style.opacity = 1;
});
};
runButton.disabled = false
runMessage.style.opacity = 1
result.style.opacity = 1
})
}
</script>
</body>
</html>
Loading

0 comments on commit 893391d

Please sign in to comment.