DEV Community: Ldakanno

Making a POST request using json-server

Ldakanno — Sun, 11 Dec 2022 08:49:39 +0000

Welcome

Hi everyone, it has definitely been a while. This tutorial is mainly for beginners like myself, and by creating this post, I will refresh my knowledge to solidify my skills. Many of you already know how to do these things, but hopefully someone out there can find this post useful. For my current React project that I am working on, I need to incorporate a GET request and a POST request as some of the requirements. In my last blog post, I wrote about how to use json-server. Well, now we are gonna learn how to make a POST request! It will be very exciting, and this blog post will also serve as a brain refresher for me. So once you have json-server set up (refer to my last post if you don't know how), you are going to run it by typing into your terminal:

$ json-server --watch db.json

POST Request Basics

Once your json-server is set up and has some data, you are going to create a basic POST request. There are a few requirements to make a post request. Alongside the URL you will be posting to, you need to also have a configuration object that will pretty much explain what the post request will be. For visual aid, here is a basic example of what a post request will look like:

fetch(URL_HERE, {
    method: 'POST',
    headers: {
       'Content-Type': 'application/json',
    }
    body: JSON.stringify({
       'ID': 2,
       'Name': 'John',
       'lastName': 'Doe'
    })
}).then(response => response.json())
.then(console.log(newPerson)

What is all that?

It is very important to have a body in your configuration object when making a POST request. Just think about it, how can you try to POST something, when the server does not know what you want to POST? It is simply not possible. This configuration object will tell the server important information on what you want to POST. Again, this is a pretty basic outline. You can maybe apply this particular example I created to some sort of function that adds a new employee to a database. Another important thing to note is the method. Whenever you make a fetch request that does not include a configuration object, it is automatically interpreted as a GET request. To make any request other than GET, you will have to specify the method in which you are trying to use, in this example it would be POST since we are making a POST request. The header will communicate what kind of data we will be sending. The JSON.stringify method is really neat. It converts a javascript object into a JSON string. We need to do this in order to communicate with the server. Further along, you will see .then() twice. The first instance is to return a promise object. The last .then, in our particular example, will just print out the data into the console. This is especially handy to do in order to check if the POST was made correctly. Obviously, you can manipulate the data however you need. For example, with this particular instance you can display the new employee onto the home page of a web application if you wanted to. Congratulations, you just learned how to make a basic POST request using JSON-server!

First Big Project / Learning How To Use JSON server

Ldakanno — Fri, 02 Sep 2022 23:27:37 +0000

Hello to whoever that has decided to read this! I gotta throw you an update on my learning progress. I finished my first big project, so strap in and get ready to see some beginner programming. Yes, it's okay to laugh and cringe. I'll show you my project and get into how you can set up a JSON server.

As you may have noticed I am a huge fan of Avatar the Last Airbender (Nickelodeon, please don't come for me, I'm poor). This web application is inspired by Uncle Iroh's tea shop in Ba Sing Se. I admire Iroh's character a lot, so I really tried to pay my respects by not making a complete pile of garbage. My main focus was the JavaScript, and to save time I used Materialize. If Materialize was a person, I'd kiss them. It is such a handy-dandy CSS framework!

API Hunting

I struggled a lot on finding an API that met my needs for what I had envisioned. So, I decided to just make my own data and use JSON server. I am a strong independent programmer, and I don't need to rely on a free public API! Okay, jokes aside, here's what I created based on my vision:

Here is the submit form being used as a search bar:

Here are the click events I have in the footer of the web application:

When setting up a JSON server, you need to make sure you install it locally. You can visit here to do that! Then, in the directory you are working on, you need to create a db.json file to store your data. In this file, you will need to use the correct JSON format when inputing the data. JSON syntax looks very much like a typical JavaScript object, but not quite the exact same. Yes, it has brackets and key/value pairs, so naturally it will be comforting to see some sort of familiarity when you first encounter JSON.

Here is an idea of how I formatted my db.json file, and hopefully it can give you a basic idea on how to format your own:

{
    "id": 1,
    "name": "Black Tea",
    "image": "https://media.istockphoto.com/photos/black-tea-in-a-cup-picture-id475614605?b=1&k=20&m=475614605&s=612x612&w=0&h=rJ47IWDVx0UqSjWs_YlZCsN-cyXRLbtW-CMTQUmHnMs=",
    "description": "Often sold in a blend of some sort, the flavor depends on the location the plant was grown and the blend it is sold in. Consisting of many varieties, it is the most common type of tea. It supports heart health and boosts the body's defense towards oxidative stress.",
    "flavorProfile": "strong, dark"
  },

This is an example of a singular data object that you would find wrapped in brackets alongside other similar objects, all separated by commas. In JSON format, objects are wrapped in curly braces, and separated by commas. Square brackets are used to hold arrays, so keep this all in mind when creating your data. Find a structure that is easy for you to work with.

Once you have your data in the proper format, get it running!

$ json-server --watch db.json

Once you visit your localhost url, you will be greeted by the most comforting text face along with supportive words that remind you that you are doing just fine.

First Blog Post!

Ldakanno — Sat, 09 Jul 2022 20:48:26 +0000

Hello to whoever takes the time to read this! Thank you, and welcome to my first blog post. Right now I am an absolute beginner when it comes to software engineering, so please be gentle ( ﾟヮﾟ). I've also never blogged before, so forgive me if my posts are boring. Since this first post is more of an introduction, I will not be diving into any progress with my studies just yet. Stay tuned! ʕ ·ᴥ· ʔ