IBDOM: Interactive Data-Mapping Demo

Input: JSON Objects: Modify them at will.

Modify Fields in the boxes below

/* also try: arrayOfObjects = []; //empty Array change values below and click second button. */ arrayOfObjects = [ { year: 2002, make: "BMW", //changing this value should un-highlight row model: "325i", price: 48151.621234, vehicleUrl: "http://www.carsdirect.com/bmw" } , { year: 2003, make: "Jeep", model: "Liberty", price: 16234.201234, vehicleUrl: "http://www.carsdirect.com/jeep" } ]; singleObject = { //below are table headers. Change them then click first button. column1: "Year", column2: "Make", column3: "Model", column4: "Price", column5: "Info", //summary gets injected in table's title, summary attributes //as well as tfoot. summary: "this table shows you car listings", //footer info lastUpdated: new Date() //footer info };

Process: Pick what to inject.

Single Object: Update Table Headers and Footer Array of Objects: Update Table Data Rows

Output: Where your JSON input gets injected when you click the buttons above.

tweak the table's initial state, before injection

Keep table hidden (display:none in .IB_POPULATE) before it gets injected with "Single Object" Headers and Footer Info.

Keep table body hidden (display:none in .IB_POPULATE) before it gets injected with "Array of Objects" table rows.

see the table below

data:column1	data:column2	data:column3	data:column4	data:column5
data:summary This information was last updated on data:lastUpdated
data:year	data:make	data:model	$data:price:type:number_2_decimals or best offer	Click here for more info on this data:year data:make data:model
ROW SEPARATOR
nothing was found