Create a table dynamically using JSON keys and Values

Question

I am getting the JSON response from a Ajax call like this below:

{"Key1":"Value1" , "Key2":"Value2" , "Key3":"Value3" , "Key4":"Value4" }

I need create a table like

KEYS  VALUES
Keys1 Value1
Keys2 Value2
Keys3 Value3
Keys4 Value4

I have used to read the above JSON string through this function below

var resData = {
   "Key1": "Value1",
   "Key2": "Value2",
   "Key3": "Value3",
   "Key4": "Value4",
};
JSON.parse(resData, function (k, v) {
   alert(k); // It shows Key value
   alert(v); // It shows value
});

I couldn't achieve to build using this function. So, please help me to tweak this code or with new code to build the HTML table dynamically using the JSON keys and Values.

Ted · Accepted Answer · 2015-02-17 19:22:13Z

2

For this html:

<table id="myTable">
    <thead>
        <tr>
            <th>KEY</th>
            <th>VALUE</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

this jQuery script:

var resData = {"Key1":"Value1" , "Key2":"Value2" , "Key3":"Value3" , "Key4":"Value4" },
    $tbody = $('#myTable').find('tbody');

JSON.parse(resData, function (k, v) {
    $tbody.append('<tr><td>'+k+'</td><td>'+v+'</td></tr>');
});

answered Feb 17, 2015 at 19:22

Ted

14.9k2 gold badges43 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anandharaman Buvaneswaran Over a year ago

When the table renders on the page, it shows a extra [object Object] like{"Key1":"Value1" , "Key2":"Value2" , "Key3":"Value3" , "Key4":"Value4" ,"":"[object Object]"}.. Why it is coming like this? how can i avoid that?

void · Accepted Answer · 2015-02-17 19:20:51Z

0

Do it like...

var table = "<table>";
var resData = {"Key1":"Value1" , "Key2":"Value2" , "Key3":"Value3" , "Key4":"Value4" }
resData = JSON.parse(resData);
for(var k in resData ) {
table +="<tr><td>"+k+"</td><td>"+resData[k]+"</td></tr>";
});
table +="</table>"

answered Feb 17, 2015 at 19:20

void

36.7k10 gold badges71 silver badges111 bronze badges

Comments

Artur Filipiak · Accepted Answer · 2015-02-18 18:58:31Z

Yet another way. Creates table dynamically

var table = $('<table/>').html('<thead><tr><th>KEYS</th><th>VALUES</th></tr></thead>').appendTo('body'),
    tbody = table.append('<tbody/>');
$.each(resData, function(key, value){
    tbody.append('<tr><td>'+key+'</td><td>'+value+'</td></tr>');
});

DEMO

[EDIT]

And in addition, there's an example of how to create a table from multidimensional objects (or/and arrays):

var resData = {
    "John": {
        "Name":"John", 
        "Surname":"Doe",
        "Sex":"Mr.",
        "Age":"36",
        "About":{
            "Status":"Married",
            "Interests":[
                "Family",
                "Games",
                "Swimming",
                "Photography",
                "Football"
            ],
            "Work":"Web developer"
        }
    }
};

function parseToTable(obj, el){
    $.each(obj, function(key, value){
        var keyType = ($.isPlainObject(value) ? '{'+key+'}' : ($.isArray(value) ? '['+key+']' : key));
        var tr = $('<tr/>').html('<td>'+keyType+' :</td>').appendTo(el);
        if($.isPlainObject(value) || $.isArray(value)){
            parseToTable(value, $('<table/>').html('<thead><tr><th>KEY:</th><th>VALUE:</th></tr></thead>').appendTo(tr));
        }else{
            tr.append('<td>'+value+'</td>');
        }
    });
}

var table = $('<table/>').html('<thead><tr><th>KEY:</th><th>VALUE:</th></tr></thead>').appendTo('body');
parseToTable(resData, table.append('<tbody/>'));

table {
    border-collapse: collapse;
    border: 1px solid #929292;
    margin:8px;
    box-shadow: 0 0 8px #ababab;
}

th, td {
    padding: 5px;
    border: 1px solid #929292;
    text-align: left;
    vertical-align: top;
    background:#fff;
    font-weight:normal;
}

th{
    background:#a9a9a9;
    color:white;
}
th:nth-child(1){
    text-align: right;
}

td:nth-child(1){
    font-weight: bold;
    background: #f6f6f6;
    text-align: right;

}
td:nth-child(2){
    font-style: italic;
    text-align: left;
}

tr table thead tr th{
    font-size:12px;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Collectives™ on Stack Overflow

Create a table dynamically using JSON keys and Values

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related