How To Convert Base64 to JSON String in JavaScript?

Last Updated : 13 Sep, 2024

There could be situations in web applications, where there is a need to decode the data from Base64 format back into its original JSON format. It generally happens when one has to transmit data over the network where Base64 encoding is well suited for encoding binary data.

In this article, we will see how one can convert Base64 strings into JSON-formatted strings in JavaScript.

Different approaches to convert Base64 to JSON String in JavaScript.

Table of Content

Using atob() and JSON.parse()
Using Buffer in Node.js

Approach 1: Using atob() and JSON.parse()

There are occasions, especially within web browsers when Base64 data and JSON have to be decoded and parsed separately.

In the first step, we will use atob() function which converts Base64 string into a plain text string.
In the last step, we will use JSON.parse() for conversion of the decoded string into a a JSON object.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Convert Base64 to JSON String</title>
</head>

<body>
    <h1>GeeksForGeeks</h1>
    <h3>Base64 to JSON Conversion</h3>
    <button id="convert-btn">Convert Base64 to JSON</button>
    <pre id="result"></pre>

    <script>
        // Sample Base64-encoded JSON string
        const base64Data = 
             "eyAiTmFtZSI6ICJQYW5rYWogQmluZCIsICJBZ2UiOiAyMSwgIkNvdW50cnkiOiAiSW5kaWEiIH0=";

        // Function to convert Base64 to JSON
        function convertBase64ToJson() {
            try {
                // Decode Base64 to string
                const jsonString = atob(base64Data);

                // Parse string to JSON
                const jsonObject = JSON.parse(jsonString);

                // Display the JSON object
                document.getElementById("result").textContent = 
                    JSON.stringify(jsonObject, null, 2);
            } catch (error) {
                console.error("Error decoding Base64:", error);
            }
        }

        // Event listener for the convert button
        document.getElementById("convert-btn").addEventListener("click", convertBase64ToJson);
    </script>
</body>

</html>

Output

Approach 2: Using Buffer in Node.js

This approach is adequate for JavaScript running on a server (Node.js) and where one has to deal with Binary and Base64 encoding.

In first step you have to create a Buffer from Base64 string using Buffer.from(base64Data, ‘base64’).
Use buffer.toString(‘utf-8’) and change the Buffer to a UTF-8 string.
In last step we will use JSON.parse() for converting string into JSON object.