Client-side Data Compression and Decompression with JavaScript

If you are looking for a JavaScript code for compressing/decompressing algorithms, you have come to the right place. In this post, I will explain the following points:

Compressing JSON at the client-side and decompressing using C#
Compressing data in PHP and decompressing in JavaScript
Compressing XML, strings, and variables on the client-side
Compressing your JSON data up to 80%

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Get  JSON Data From Controller</title>
</head>
<body>
    <div>

        <input type="button" id="compresss" value="compresss" onclick="GetcompressData();" />
        <input type="button" id="uncompress" value="uncompress" onclick="Getuncompressed();" />
    </div>
</body>
</html>

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
    var LZW = {
        compress: function (uncompressed) {
            "use strict";
            var i,
                dictionary = {},
                c,
                wc,
                w = "",
                result = [],
                dictSize = 256;
            for (i = 0; i < 256; i += 1) {
                dictionary[String.fromCharCode(i)] = i;
            }
            for (i = 0; i < uncompressed.length; i += 1) {
                c = uncompressed.charAt(i);
                wc = w + c;

                if (dictionary.hasOwnProperty(wc)) {
                    w = wc;
                } else {
                    result.push(dictionary[w]);

                    dictionary[wc] = dictSize++;
                    w = String(c);
                }
            }
            if (w !== "") {
                result.push(dictionary[w]);
            }
            return result;
        },
        decompress: function (compressed) {
            "use strict";
            var i,
                dictionary = [],
                w,
                result,
                k,
                entry = "",
                dictSize = 256;
            for (i = 0; i < 256; i += 1) {
                dictionary[i] = String.fromCharCode(i);
            }
            w = String.fromCharCode(compressed[0]);
            result = w;
            for (i = 1; i < compressed.length; i += 1) {
                k = compressed[i];
                if (dictionary[k]) {
                    entry = dictionary[k];
                } else {
                    if (k === dictSize) {
                        entry = w + w.charAt(0);
                    } else {
                        return null;
                    }
                }
                result += entry;
                dictionary[dictSize++] = w + entry.charAt(0);
                w = entry;
            }
            return result;
        }
    }
    var employees = [
     { "firstName": "John", "lastName": "Doe" },
     { "firstName": "Anna", "lastName": "Smith" },
     { "firstName": "Peter", "lastName": "Jones" }
    ];
    function Getuncompressed() {
        var str = JSON.stringify(employees)
        var compressdata = LZW.compress(str)
        var uncompressdata = LZW.decompress(compressdata)
        alert(uncompressdata)

    }
    function GetcompressData() {
        var str = JSON.stringify(employees)
        var compressdata = LZW.compress(str)
        alert(compressdata)

    }
</script>

Compressed Data:

Uncompressed Data:

This JavaScript code defines an implementation of the LZW compression algorithm and provides two functions to demonstrate compression and decompression of JSON data.

LZW Compression and Decompression Functions:

The LZW object contains two methods: compress and decompress.
compress: This function compresses the input string using the LZW compression algorithm. It iterates over the input string, building a dictionary of substrings encountered so far and replacing them with dictionary indices. It returns an array of compressed indices.
decompress: This function decompresses the input compressed array back into the original string using the LZW decompression algorithm. It rebuilds the dictionary as it encounters compressed indices, adding new entries as needed. It returns the decompressed string.

Data Preparation and Compression Demo:

The employees array contains some sample data.

The GetcompressData function:

Converts the employees array to a JSON string using JSON.stringify.
Compresses the JSON string using the LZW.compress function.
Displays the compressed data in an alert dialog.

Decompression Demo:

Performs the same initial step as GetcompressData.
Compresses the JSON string using the LZW.compress function.
Decompresses the compressed data using the LZW.decompress function.
Displays the decompressed data in an alert dialog.

Client-side Data Compression and Decompression with JavaScript

Read Similar Articles