Convert Your API JSON Data to HTML Table

Author : Code With Mark

With just one line of code, you can easily turn your api json data into html table.

Watch the video below to learn how

Demo

 

Below is an example

 

//Syntax
js.CreateTable(DataArr,Columns)

//Example

var DataArr =
[
{user_name:'awesomefunctions',site:'http://awesomefunctions.com'},
{user_name:'codewithmark',site:'http://codewithmark.com'},
{user_name:'google',site:'http://google.com'},
]

//Method 1 - No custom columns

//Will create and return table data
var tbl = js.CreateTable(DataArr);

//Out put table
$('.mytablediv').html(tbl);

//Method 2 - With custom columns

//Will create and return table data
var Columns = ["Names", "Sites"];

var tbl = js.CreateTable(DataArr,Columns);

//Out put table
$('.mytablediv').html(tbl);

 

This is part of the awesome functions library

Below is the code for “CreateTable” function in case you want it.

Note: _.size()  is part of the lodash function.

var CreateTable = function (DataArr,Columns)
{
	var GetHeaderNames = _.size(Columns) <1 ? DataArr[0] : Columns;
	var GetRows = DataArr;

	var d ='';
	d += '<table class="table table-hover table-bordered " width="100%">';

	//--->Create Header- Start
	d += '<thead>';
	d += '<tr>';
	$.each(GetHeaderNames,function(index, value)
	{
		var col_value = _.size(Columns) <1 ? index : value;
		d += '<th >'+_.startCase(col_value)+'</th>';
	})
	d += '</tr>';
	d += '</thead>';
	//--->Create Header- End

	//--->Create Rows - Start
	d += '<tbody>';
	$.each(GetRows,function(index, v1)
	{
		d += '<tr>';
		$.each(v1,function(index, v2)
		{
			d += '<td id="myTable" >'+v2+'</td>';
		})
		d += '</tr>';
	})
	d += "</tbody>";
	//--->Create Rows - End

	d +=" </table>";
	return d;
}

 

Sharing is caring:            

You might also like

Learn how to create HTML table to json array data

Learn how to easily unfollow all of your twitter followers in 3 seconds

Best Option For Hashing Your Passwords In PHP

How to detect pressing Enter on keyboard using jQuery?

What you need to know to become a web developer



Did you find this helpful?