How to Convert Blob Data to JSON in JavaScript ? Last Updated : 23 Apr, 2024 Comments Improve Suggest changes Like Article Like Report When dealing with Blob data in JavaScript, such as binary data or files, we may need to convert it into JSON format for doing so JavaScript provides us with various methods as listed below. Table of Content Using FileReader APIUsing TextDecoder APIUsing FileReader APIIn this approach, we first use the readAsText() method to read the Blob as text and once the data is loaded we parse the text into JSON using JSON.parse(). Example: The below code implements the FileReader API to convert the blob data into JSON format. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Converting Blob to JSON </title> </head> <body style="text-align: center;"> <h2> Converting "{\"name\": \"John\", \"age\": 30}" <br/>string to Blob and then formatting it into JSON </h2> <h3 id="json"></h3> <script> const jsonHeading = document.getElementById('json'); const blob = new Blob( ["{\"name\": \"John\", \"age\": 30}"], { type: "application/json" }); const reader = new FileReader(); reader.onload = function (event) { const jsonData = JSON.parse(event.target.result); jsonHeading.innerHTML = "Converted JSON Data = { Name: " + jsonData.name + ", Age: " + jsonData.age + " }"; }; reader.readAsText(blob); </script> </body> </html> Output: Using TextDecoder APIIn this approach, we will use the decode() method of TextDecoder to decode the Blob data as text and once the data is decoded we parse the text into JSON using JSON.parse(). Example: The below code implements the TextDecoder API to convert blob data into JSON. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Converting Blob to JSON </title> </head> <body style="text-align: center;"> <h2> Converting "{\"name\": \"John\", \"age\": 30}" <br />string to Blob and then formatting it into JSON </h2> <h3 id="json"></h3> <script> const jsonHeading = document.getElementById('json'); const blob = new Blob( ["{\"name\": \"John\", \"age\": 30}"], { type: "application/json" }); const reader = new FileReader(); reader.onload = function (event) { const textDecoder = new TextDecoder(); const decodedText = textDecoder.decode(event.target.result); const jsonData = JSON.parse(decodedText); jsonHeading.innerHTML = "Converted JSON Data = { Name: " + jsonData.name + ", Age: " + jsonData.age + " }"; }; reader.readAsArrayBuffer(blob); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Convert Blob Data to JSON in JavaScript ? A am8254s3a Follow Improve Article Tags : JavaScript Web Technologies JSON Similar Reads How to Convert JSON to Blob in JavaScript ? This article explores how to convert a JavaScript Object Notation (JSON) object into a Blob object in JavaScript. Blobs represent raw data, similar to files, and can be useful for various tasks like downloading or processing JSON data. What is JSON and Blob?JSON (JavaScript Object Notation): A light 2 min read How to Convert CSV to JSON in JavaScript ? In this article, we will explain different ways to change Comma-Separated Values (CSV) data into JavaScript Object Notation (JSON) format, step-by-step. We'll break down each method with clear explanations and examples. There are several approaches available in JavaScript to convert CSV to JSON in J 3 min read How to Convert JSON to base64 in JavaScript ? Base 64 is the encoding scheme that represents binary data in a printable ASCII format, commonly used for data serialization and transmission. Table of Content Using btoa functionUsing Manual ConversionUsing btoa functionIn this approach, we're using btoa to encode a UTF-8 string representation of a 2 min read How to Convert Excel to JSON in JavaScript ? Converting Excel spreadsheets to JSON format is a common requirement in various applications. JavaScript code utilizes the read-excel-file library to parse the Excel data, convert it to JSON format, and display it. Additionally, it provides functionality to download the generated JSON file. Approach 3 min read How to Convert JSON to Excel in JavaScript? It is often necessary to export or download JSON data in the form of Excel spreadsheets when developing web applications, any web developer would be able to go through this article as it provides a useful function of converting JSON files to Excel format using SheetsJS through JavaScript.These are t 4 min read How to Convert Map to JSON in JavaScript ? In JavaScript, when working with data, you might encounter situations where you need to convert a Map object into a JSON format. This can be useful for sending data over the network, storing data in local storage, or interfacing with APIs that expect JSON data. Converting a Map to JSON means convert 3 min read How to Convert XML to JSON in JavaScript? To convert XML to JSON in JavaScript, various methods and libraries and be used. Here, we use xml-js library that provides xml2json function to convert XML to JSON data. It takes XML data as input and gives the JSON objects as output. We can also use the DOMParser from the xmldom package to convert 2 min read How to Convert HTML to JSON in JavaScript ? Converting HTML to JSON is important for structured data extraction and integration with JavaScript applications. Here, we will learn different approaches to converting HTML to JSON in JavaScript. Below are the approaches to convert html to JSON in JavaScript: Table of Content Using html-to-json Lib 2 min read How to Convert Base64 to Blob in JavaScript? Working with files and data in web applications often involves dealing with binary data. One common scenario is converting a Base64 string into a Blob object, which can then be used in various ways, such as creating downloadable files or uploading images to a server. This article will guide you thro 4 min read How to Convert JSON to ArrayBuffer in JavaScript? An ArrayBuffer is a complex data type, and structures which has a fixed length and takes binary content as the whole. Any variable that contains pure binary data will be defined in JavaScript as Simple Data, however on some occasions it is sometimes necessary to convert JSON data to an ArrayBuffer, 4 min read Like