Skip to content

Instantly share code, notes, and snippets.

@TS000

TS000/index.html

Last active February 8, 2017 16:26
Show Gist options
  • Save TS000/620b0651cf280b128fb6dbf43aa5b490 to your computer and use it in GitHub Desktop.
Save TS000/620b0651cf280b128fb6dbf43aa5b490 to your computer and use it in GitHub Desktop.
Download ZIP
JSON from an API to Handlebars.js
Raw
readme.md

This is an example of using handlebar.js to bring json to the DOM.

In this example I show how dot notation changes depending on what value is being taken from the json.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>API + Handlebars.js</title>
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<!-- JS -->
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
</head>
<body>
<!-- Pull in the json -->
<script>
var url = 'plans.json';
</script>
<div id="anvil">
<h1><strong>Insurance Options</strong></h1></div>
<!-- Template -->
<script id="director" type="text/template">
<!-- Here we begin iterating over the json for values -->
{{#each options}}
<div>
<!-- Note that the dot notation relfects where the value is within the array -->
<h1>{{company_base.name_full}}</h1>
<b>AM Best Rating</b>: {{company_base.ambest_rating}}
<p><b>Type</b>: {{company_base.business_type}}</p>
<p>
<b>Fees</b>:
<ol>
<li><b>Type</b>: {{fees.0.type}}</li>
<li><b>Name</b>: {{fees.0.name}}</li>
</ol>
</p>
</div>
{{/each}}
</script>
<!-- Handlebars.js rockets -->
<script>
var rockets = function(url, directorID, anvil) {
$.getJSON(url, function(data) {
var template = $(directorID).html();
var gem = Handlebars.compile(template)(data);
$(anvil).append(gem);
});
}
//Fire the rockets
rockets('plans.json', '#director', '#anvil');
</script>
</body>
</html>
Raw
plans.json
{
"options":
[{
"company_base": {
"business_type": "Life, Accident, and Health",
"established_year": 1998,
"med_supp_state_market_data": [{
"market_share": 0.63490064689900005,
"state": "AK",
"lives": 8041,
"premiums": 14714825,
"claims": 11649263
}, {
"market_share": 0.34445359987700003,
"state": "WY",
"lives": 14916,
"premiums": 30178554,
"claims": 24281001
}],
"underwriting_data": [],
"med_supp_national_market_data": {
"market_share": 0.315510079562,
"state": null,
"lives": 3723184,
"premiums": 8276072271,
"claims": 6436017316
},
"customer_complaint_ratio": 0.0013368044250809999,
"ambest_outlook": "Stable",
"name_full": "Major Health Partners of the Wind",
"ambest_rating": "A",
"parent_company": "aghzfmNzZ2sdfZWRfc3VwcA",
"last_modified": "2017-01-16T12:28:17.591830",
"customer_satisfaction_ratio": 0.83666666666699996,
"default_resources": {
"final-expense-life": {
"e_app_link": ""
},
"medicare-advantage": {
"e_app_link": ""
},
"medicare-supplement": {
"e_app_link": "sdf"
},
"hospital-indemnity": {
"e_app_link": ""
},
"dental": {
"e_app_link": ""
}
},
"key": "assdfsdfVwcA",
"parent_company_base": {
"established_year": 1998,
"code": "707",
"name": "Space Insurance",
"key": "asfdf",
"last_modified": "2016-11-11T16:42:52.240940"
},
"sp_rating": "AA-",
"naic": "79413",
"type": "STOCK",
"name": "Spacewomen Insurance"
},
"has_pdf_app": true,
"rate": {
"quarter": 23841,
"annual": 92964,
"semi_annual": 47682,
"month": 7747
},
"rating_class": "Standard",
"fees": [{
"name": "corgi discount",
"type": "buddy"
}],
"rate_increases": [{
"rate_increase": -0.050193050199999999,
"date": "2013-04-01T00:00:00"
}, {
"rate_increase": 0.028455284599999998,
"date": "2014-04-01T00:00:00"
}, {
"rate_increase": 0,
"date": "2015-04-01T00:00:00"
}, {
"rate_increase": 0,
"date": "2016-04-01T00:00:00"
}, {
"rate_increase": 0,
"date": "2017-01-01T00:00:00"
}],
"archive": null,
"select": false,
"age_increases": [
0,
0,
0,
0
],
"rate_type": "community rated",
"note": null,
"discounts": [{
"type": "percent",
"name": "household",
"value": 0.050000000000000003
}],
"location": "fsdf",
"legacy_id": null,
"effective_date": "2017-01-01T00:00:00",
"company": "sdhdh",
"e_app_link": "",
"location_base": {
"expires_date": "2099-12-31T00:00:00",
"county": [],
"zip3": [],
"state": "CA",
"last_modified": "2016-11-14T16:43:54.686230",
"key": "superkey2",
"effective_date": "2017-01-01T00:00:00",
"zip5": [
"91701",
"95899"
]
},
"last_modified": "2016-11-14T16:49:08.296850",
"plan": "K",
"key": "superkey",
"riders": [],
"expires_date": "2099-12-31T00:00:00",
"tobacco": true,
"has_brochure": false,
"gender": "M",
"age": 77
}, {
"company_base": {
"business_type": "Life, Accident, and Health",
"established_year": 1966,
"med_supp_state_market_data": [{
"market_share": 0.083390693682600006,
"state": "AK",
"lives": 814,
"premiums": 1932711,
"claims": 1492030
}
],
"underwriting_data": [],
"med_supp_national_market_data": {
"market_share": 0.024320959679200001,
"state": null,
"lives": 322469,
"premiums": 637957495,
"claims": 476453255
},
"customer_complaint_ratio": 0.003367204920609,
"ambest_outlook": "Stable",
"name_full": "Slighty Smaller Insurance Group of the Rockies",
"ambest_rating": "A+",
"parent_company": "aghzfmNzZ2FwaXIaCxINUGFyZW50Q29tcGFueRiAgICAwIjjCQyiAQhtZWRfc3VwcA",
"last_modified": "2016-11-11T16:43:58.236250",
"customer_satisfaction_ratio": 0.91698113207499998,
"default_resources": {
"final-expense-life": {
"e_app_link": ""
},
"medicare-advantage": {
"e_app_link": ""
},
"medicare-supplement": {
"e_app_link": "https://www.mutualofomaha.com/broker"
},
"hospital-indemnity": {
"e_app_link": ""
},
"dental": {
"e_app_link": ""
}
},
"key": "aghzfmNzZ2FwaXIUCxIHQ29tcGFueRiAgICAgJS4CQyiAQhtZWRfc3VwcA",
"parent_company_base": {
"established_year": 1966,
"code": "261",
"name": "Super Huge Insurance Group of the Sea",
"key": "aghzfmNzZ2FwaXIaCxINUGFyZW50Q29tcGFueRiAgICAwIjjCQyiAQhtZWRfc3VwcA",
"last_modified": "2016-11-11T16:41:54.754050"
},
"sp_rating": "A+",
"naic": "71412",
"type": "MUTUAL",
"name": "Large Group of Borkers of the Sky"
},
"has_pdf_app": true,
"rate": {
"quarter": 23797,
"annual": 95186,
"semi_annual": 47593,
"month": 7932
},
"rating_class": "",
"fees": [{
"name": "doberman discount",
"type": "kipling"
}],
"rate_increases": [{
"rate_increase": 0,
"date": "2016-06-01T00:00:00"
}],
"archive": null,
"select": false,
"age_increases": [
0.031643973800000003,
0.030062324299999998,
0.029896784900000001,
0.030065660599999999
],
"rate_type": "attained age",
"note": null,
"discounts": [{
"type": "percent",
"name": "household",
"value": 0.12
}],
"location": "aghzfmNzZ2FwaXIVCxIITG9jYXRpb24YgICA4YGZmAoMogEIbWVkX3N1cHA",
"legacy_id": null,
"effective_date": "2016-06-01T00:00:00",
"company": "aghzfmNzZ2FwaXIUCxIHQ29tcGFueRiAgICAgJS4CQyiAQhtZWRfc3VwcA",
"e_app_link": "",
"location_base": {
"expires_date": "2099-12-31T00:00:00",
"county": [],
"zip3": [],
"state": "CA",
"last_modified": "2016-05-18T15:29:40.614340",
"key": "aghzfmNzZ2FwaXIVCxIITG9jYXRpb24YgICA4YGZmAoMogEIbWVkX3N1cHA",
"effective_date": "2016-06-01T00:00:00"
}
}]
}
Raw
style.css
img { width:200px; }
a {
color: #0084b4;
text-decoration:none;
}
a:hover { text-decoration : underline; }
div#anchor { width: 230px; }
div#anchor:hover {
padding: 12px; /* padding + border = 16px */
border: 4px solid #ddd;
}
div {
display: block;
overflow: hidden;
height: 100%;
width: 100%;
margin: 3px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 4px;
text-decoration: none;
background: #fff;
color: #333;
}
div:hover {
padding: 12px; /* padding + border = 16px */
border: 4px solid #0084b4;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment