JavaScript text json blob Archives

If you enjoy this story, feel free to like or share it!

I was on a hike, backpack loaded with essentials, trekking through a forest. Each item in my backpack had a special way of being useful, just like the methods of a Response object in JavaScript.

First, I reached a bubbling stream, a bit parched and in need of refreshment. I grabbed my water bottle, unscrewed the top, and took a sip. This was like using the text() method. It allowed me to directly access the refreshing water, just like text() lets me read raw textual data from a response. Simple, straightforward, and exactly what I needed in the moment.

Continuing on the trail, I came across a wild berry bush. I didn’t just eat them on the spot; instead, I used my container to collect and categorize them by type and color. This was akin to the json() method, where data is structured and sorted into an organized format—perfect for when I needed more than just a quick sip, but a well-categorized snack for later.

Further down the path, I stumbled upon a small pond teeming with life. I wanted to capture the scene, so I took out my camera and snapped a photo, storing the entire image as is. This was like using the blob() method, which lets me handle data as a binary large object, preserving the entirety of the content, much like the pond’s details captured in my photo.

Each method—my water bottle, berry container, and camera—served a distinct purpose, helping me interact with the forest in different ways. Just like that, text(), json(), and blob() methods allow me to handle responses based on what I need from the data. It’s all about using the right tool for the right moment on this coding adventure.

When I reached for my water bottle by the stream, it reminded me of how I might use the text() method in JavaScript. If I had a response from a server and I wanted to simply read it as plain text, I would do something like this:

fetch('https://api.example.com/data')
  .then(response => response.text())
  .then(data => console.log(data));

Here, text() is like taking a direct sip from that water bottle—straightforward and unprocessed.

Next, with the berry container, I thought about how organizing the berries is similar to using the json() method. When I need structured data, I’d handle a response like this:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

This is akin to sorting and understanding the berries—converting raw data into a structured, usable format.

Finally, capturing the pond with my camera made me think of the blob() method. If I needed to handle a response as a file or binary data, I’d use:

fetch('https://api.example.com/image')
  .then(response => response.blob())
  .then(imageBlob => {
    const imageObjectURL = URL.createObjectURL(imageBlob);
    console.log(imageObjectURL);
  });

This is like storing the entire scene of the pond for later use, preserving its full detail.

Key Takeaways:

text() is for raw text data, easy and direct for when you need simple content.
json() is for structured data, ideal for when you need to parse and utilize JSON objects.
blob() is for handling binary data, perfect for files and media that need to be downloaded or stored.

Tag: JavaScript text json blob

How Do text(), json(), and blob() Methods Differ in JS?