index.html
<!DOCTYPE html>
<html>
<head>
<title>Country synonyms</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="//cartodb.com/assets/favicon.ico" />
<script src="//libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<style>
html, body {
padding: 0;
margin: 0;
}
ul {
margin: 1.5em;
list-style: none;
}
ul li {
border-bottom: 1px solid #ccc;
padding: .2em 0 .2em .5em;
font-weight: bold;
color: #666;
}
ul li:hover {
cursor: pointer;
background-color: #f2f2f2;
color: #000;
}
ul li:nth-child(even)
{
background-color: #f2f2f2;
}
ul li span
{
display: inline-block;
*display: inline;/* for IE7*/
*zoom:1;/* for IE7*/
vertical-align: top;
}
ul li span:first-child
{
width: 200px;
min-width: 200px;
}
ul li span:nth-child(2)
{
width: 50px;
min-width: 50px;
}
ul li span:nth-child(3)
{
width: 350px;
min-width: 350px;
}
ul li span:nth-child(4),
ul li span:nth-child(5)
{
width: 80px;
min-width: 80px;
text-align: center;
}
ul li span.data
{
color: seagreen;
font-variant: small-caps;
}
ul li span.false
{
color: salmon;
font-weight: 300;
font-variant: small-caps;
}
ul #header span{
font-weight: 700;
color: black;
vertical-align: bottom;
}
</style>
</head>
<body>
<script>
function main() {
var sql = cartodb.SQL({ user: 'geocoding' });
sql.execute("SELECT name, iso3, array_to_string(synonyms, ', ') synonyms, (SELECT postal_code FROM global_postal_code_points WHERE iso3 = c.iso3 LIMIT 1) pc_points, (SELECT postal_code FROM global_postal_code_polygons WHERE iso3 = c.iso3 LIMIT 1) pc_polygons FROM (SELECT * FROM country_decoder ORDER BY name ASC) c").done(function(data) {
for (i in data.rows){
var data1 = data.rows[i].pc_points != null ? data.rows[i].pc_points : false;
var data2 = data.rows[i].pc_polygons != null ? data.rows[i].pc_polygons : false;
$('ul').append('<li><span class="name">'+data.rows[i].name+'</span><span class="iso3">'+data.rows[i].iso3+'</span><span class="syn">'+data.rows[i].synonyms+'</span><span class="data '+data1+'">'+data1+'</span><span class="data '+data2+'">'+data2+'</span></li>')
}
})
}
window.onload = main;
</script>
<ul>
<li id="header"><span class="name">Country</span><span class="iso3">ISO3</span><span class="syn">Synonyms</span><span class="data1">Postal Code Points</span><span class="data2">Postal Code Polygons</span></li>
</ul>
</body>
</html>