The Internet Speaks in Strings

Why do I have to use JSON.stringify() when I make a post request?

I approached my instructor at Flatiron, the concise Kevin, with the above question. I was learning how to make post requests to APIs with Javascript, and had found the following syntax in the Fetch API Docs:

fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers:{
'Content-Type': 'application/json'
}
})

A high level break down:

  • fetch() allows us to ‘fetch’ the resources contained at the url
  • method: 'POST' tells the server we want to add data to the resources contained at the URL
  • body: JSON.stringify(data) is the data we actually want to send
  • The information in headers tells the server the type of content our data is in

Having studied RESTful APIs using Ruby on Rails, the first two steps made sense to me. You make a request to a url, and you specify the type (method) of that request. The information contained in body also made some sense. You have to send the actual data to post to the API.

However, I didn’t understand why I had to use JSON.stringify() for my data to be received. Kevin’s response: The Internet is a String.

Everything === Text

To answer the above, we have to get back to the basics. How do we talk to servers and the internet?

The Internet Request/Response Cycle, courtesy of FlatIron School

Basically, humans use internet browsers, like Chrome, to request information, and servers respond to the browser with information based on that request. The server response includes HTML, CSS, and Javascript files, and anything else a browser needs to display a webpage.

As such, browsers must be able to consistently and efficiently process the information in those files. This must and does happen even though HTML, CSS and Javascript are different languages that follow different syntax and vocabulary. So, how do browsers render the content and styling we as developers write?

In reality, browsers and servers only work with text. All that pretty syntax highlighting is actually just your text editor being nice. At the end of the day, our programs are sent as simple text documents to the browser. The browser processes text by parsing it. It looks for special characters, which signal certain actions that cumulatively lead to content being rendered on the webpage.

More specifically, the browser will parse an HTML document by converting elements it encounters into DOM nodes, called a content tree. Similarly, it will then parse any CSS into a styling tree (the CSSOM). If any Javascript files are encountered by the parser, it will stop wherever it is to fetch and run those files. This is why Javascript files that reference any elements have to be placed at the end of an HTML file. Otherwise, the parser won’t know what the Javascript is referring to. From all this, the browser will generate the layout of the webpage, and then ‘paint’ the content to be displayed on the screen.

Why I have to use JSON.stringify()

So, even to simply render a webpage, browsers can only receive text documents, which they then parse. The same applies to any data exchanges between servers and browsers. The data can only be text.

Javascript Object Notation (JSON) is how browsers and servers exchange data. JSON uses Javascript syntax, but is still just text. As such, it can easily be sent to and from a server, and used as a data format by any programming language.

All languages communicate with JSON, and have different packages that allow us to take the strings JSON gives and transform it into a datatype that the language can process. In Javascript, for example, JSON.stringify() lets developers convert data into JSON strings. Conversely, JSON.parse() lets us convert JSON strings into Javascript arrays and objects.

So, whenever I want to make my post request to the server, I have to JSON.stringify() my data.

TLDR: Browsers and servers must use text documents to communicate. JSON.stringify() turns my Javascript data into text, therefore making my post request readable to the server.

PS: Shoutout to browsers for a doing a lot of stuff really fast.

Resources: