<ul id="links"> </ul>
var info = { "full_name": "Ben Graham", "title": "Senior Consultant", "links": [{ "Ben's Site": "https://bengraham.io" }, { "Behance": "https://www.behance.net/bengraham/" }, { "Facebook": "https://www.facebook.com/bengraham8888/" }, { "LinkedIn": "https://www.linkedin.com/in/bsg88/" }, { "Instagram": "https://www.instagram.com/bengrahamprints/" }, { "SoundCloud": "https://soundcloud.com/write-the-sound" }] }; var output = ''; for (var i = 0; i <= info.links.length; i++) { for (key in info.links[i]) { if (info.links[i].hasOwnProperty(key)) { output += '<li>' + '<a href = "' + info.links[i][key] + '" class="links' + (i + 1) + '">' + key + '</a>' + '</li>'; } // hasOwnProperty check } // for each object } //for each array element var update = document.getElementById('links'); update.innerHTML = output;
$brand-primary: #0000ff; li { list-style: none; } @for $i from 1 through 6 { .links#{$i} { color: lighten($brand-primary, $i*7); text-decoration: none; font-size: 1.2rem; font-family: helvetica; line-height:2.2rem; } }