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

Your Next Project Could Make You Money for Years

Most web developers get paid once for the work they do.

But what if you could use those same skills to build something that continues generating income long after it's launched?

A simple SaaS, plugin, web app, or digital product can keep bringing in customers and revenue month after month.

Instead of starting from zero with every new client project, you can create assets that work for you—even when you're not.

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

Google Sheets Timesheet Website App Script
2.16K views
Learn To Create YouTube Video Downloader
1.82K views
Easily Edit HTML Table Rows Or Cells With jQuery
1.49K views

Categories

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