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;
}

Why Are Developers Switching to Shiply CMS?

Because they're tired of:

  • ✓ Bloated admin dashboards
  • ✓ Endless plugin maintenance
  • ✓ Spending hours on tasks that should take minutes

If that sounds familiar, Shiply CMS might be worth a look.

Take a Look →
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

Using JavaScript Window Onload Event Correctly
340 views
How Google Developers Think (And Why You Should Too)
296 views
Learn To Create YouTube Video Downloader
293 views

Categories

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