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

Easily Find Out The Length Of Object, Array or String

Best Option For Hashing Your Passwords In PHP

Nofollow Script

Create Web Apps Faster With APIs



Did you find this helpful?