To learn more about how to set up your first mock REST API with Mockoon, head over to the Getting started tutorial.
For the rest of the tutorial, we will use an array of imaginary blog posts. In Mockoon, create a
GET /posts API endpoint that returns an array of simple blog posts with an id and a title:
You can use the following JSON as the body returned by the endpoint:
Note that your fake mock server will be available at the following URL:
It contains a
ul element that will receive our list of posts later.
We can save this HTML code in an
script tag to call our
GET /posts API endpoint. For this, we will use the
After opening your
index.html file in your browser, you should see a call in the network tab and your data displayed in the console:
postsin your HTML#
We can now render the list of post titles on the page as
<li> using a simple
For each post, we will create a new
li element and append it to the
ul container element that we created earlier.
Here is all the code put together:
You can now imagine a more complex layout where you could call more endpoints to display full articles, lists of recommended posts, etc.