Code With Mark
Home
About
Resources
Contact

Convert Your API JSON Data to HTML Table

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

Watch the video below to learn how

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.

Create Table 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;
}
For Web Developers

Working Hard But Still Not Getting Ahead?

You finish a project, get paid, and then it's back to finding the next client.

Month after month, the cycle repeats.

That's why many web developers never build real financial freedom—even though they're highly skilled.

The developers creating long-term wealth are using those same skills to build SaaS products, plugins, and digital tools that generate recurring income.

What if your next project could pay you more than once?

Learn How To Build Monthly Income →
What you need to know to become a web developerWhat you need to know to become a web developer←Previous
Easily Find Out The Length Of Object, Array or StringEasily Find Out The Length Of Object, Array or StringNext→

Related Posts

  • How Google Developers Think (And Why You Should Too)
  • Add Google Sign-In in 2 Minutes
  • Form Validation in 1 Line

Top Posts Viewed

Easily Edit HTML Table Rows Or Cells With jQuery
243 views
How To Create A Secure Login System With PHP And MySQL
229 views
PHP Simple Database Class
224 views

Categories

Courses
Excel
Google Script
Javascript
jQuery
Microsoft Access
MongoDB
Node JS
PHP
Quick Tip
Uncategorized
Wordpress