How to Read and Parse JSON String in jQuery and Display in HTML Table

Hi, in today’s post we’ll see How to Read and Parse JSON String in jQuery. JSON is a human readable data exchange format used among web services and it's a necessary skill for modern day web developers (frontend/backend) to deal with JSON data received from various third-party APIs. Keeping that in mind we have discussed about parsing json data using php script sometime back. And now we have come up with this jquery tutorial which walks you through the process of parsing json string using jquery library, convert and display it into an html table.

How to Read and Parse JSON String in jQuery?

jQuery provides several JSON methods like “getJSON”, “parseJSON”, “stringify” and for this post we’ll pickout and use the method “parseJSON”, which parses through well formed json string and returns javascript object.

JSON.parseJSON(JSON STRING)

The function parseJSON() takes the string parameter and returns String, Number, Object, Array or Boolean.

Using this jQuery method we can easily convert the json string to object and display it in a table. Let’s see how to do it.

Step-1: First create a <div> block as a placeholder for the html table.

<div id="datalist"></div>

Step-2: Next add some table formatting with css styles.

<style type="text/css">
    table {
        border: 1px solid #777;
        border-collapse: collapse;
    } 

    table tr th,
    table tr td {
        border: 1px solid #777;
    }
</style>

Step-3: Next load the javascript jQuery library above the closing body tag of the html file.

<script src="/path/to/jquery-1.10.2.min.js"></script>

Step-4: Next add the jquery method to parse a json string and iterate over the collection to display it as a list in a html table element.

<script>
$(document).ready(function() {
    var data = '[{ "firstName": "John", "lastName": "Smith" }, { "firstName": "Peter", "lastName": "Jason" }, { "firstName": "Alice", "lastName": "Ray" }]';
    var table = '<table><thead><th>First Name</th><th>Last Name</th></thead><tbody>';
    var obj = $.parseJSON(data);
    $.each(obj, function() {
        table += '<tr><td>' + this['firstName'] + '</td><td>' + this['lastName'] + '</td></tr>';
    });
    table += '</tbody></table>';
    document.getElementById("datalist").innerHTML = table;
});
</script>

The variable “data” holds a valid JSON string with first and last names for three different persons and the jquery function “$.parseJSON(data)” converts that json string to java script object. And using the jQuery’s $.each() method we seamlessly iterates over the collection of object and display in a table view.

Now open the file in the browser and you will get the list of names neatly displayed in the html table.

parse-json-and-convert-to-html-table-jquery

JSON Data Displayed in the HTML Table using jQuery

Here is the complete html and javascript for parsing JSON string in jQuery.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Read and Parse JSON String in jQuery | Example</title>
    <style type="text/css">
    table {
        border: 1px solid #777;
        border-collapse: collapse;
    } 

    table tr th,
    table tr td {
        border: 1px solid #777;
    }
    </style>
</head>
<body>
    <div id="datalist"></div>

    <script src="/path/to/js/jquery-1.10.2.min.js"></script>
    <script>
    $(document).ready(function() {
        var data = '[{ "firstName": "John", "lastName": "Smith" }, { "firstName": "Peter", "lastName": "Jason" }, { "firstName": "Alice", "lastName": "Ray" }]';
        var table = '<table><thead><th>First Name</th><th>Last Name</th></thead><tbody>';
        var obj = $.parseJSON(data);
        $.each(obj, function() {
            table += '<tr><td>' + this['firstName'] + '</td><td>' + this['lastName'] + '</td></tr>';
        });
        table += '</tbody></table>';
        document.getElementById("datalist").innerHTML = table;
    });
    </script>
</body>
</html>

Read Also:

And that was all about reading and parsing json string using jQuery.