mountable.js

An easier way to pass JSON content into a HTML table using jQuery


A quite simple example

The JSON file

var jsonContentSimple =
[
    {
        "first_name": "John",
        "last_name": "Appleseed",
        "email": "john@appleseed.com"
    },
    {
    	"first_name": "João",
    	"last_name": "Canabrava",
    	"email": "joao@canabrava.com"
    },
    {
        "first_name": "Patrick",
        "last_name": "Grapeseed",
        "email": "patrick@grapeseed.com"
    },
    {
    	"first_name": "Xingling",
    	"last_name": "Ping Pong",
    	"email": "xingling@pingpong.com"
    }
];

The result

First Name Last Name Email

Example two: a bit more complex

The JSON file

var jsonContentComplex =
[
    {
        "number": 1,
        "first_name": "John",
        "last_name": "Appleseed",
        "email": "john@appleseed.com",
        "sex": "Male",
        "techniques":
        [
        	"Can vanish",
        	"Is strong",
        	"Like Apples"
        ],
        "location": "United States"
    },
    {
    	"number": 1,
    	"first_name": "João",
    	"last_name": "Canabrava",
    	"email": "joao@canabrava.com",
    	"sex": "Male",
    	"techniques":
    	[
    		"Is always drunk",
    		"Stronger liver",
    		"Caipirinha adept"
    	],
    	"location": "Brazil"
    },
    {
        "number": 3,
        "first_name": "Patrick",
        "last_name": "Grapeseed",
        "email": "patrick@grapeseed.com",
        "sex": "Male",
        "techniques":
        [
        	"Hates grapes",
        	"It has a grape head"
        ],
        "location": "United Kingdom"
    },
    {
    	"number": 4,
    	"first_name": "Xingling",
    	"last_name": "Ping Pong",
    	"email": "xingling@pingpong.com",
    	"sex": "Female",
    	"techniques":
    	[
    		"Works at AliExpress",
    		"Slavery adept"
    	],
    	"location": "China"
    }
];

The result

# First Name Last Name Techniques Email Sex Location  
M F

Like it? Give it a star.