I need to display a list of category links, like so:Category 1, Category 2, Category 3I've got it working already but the code seems pretty repetitive and a bit of a mess, I was wondering if there was a better way of doing it.This is what I've got so far:for (var i = 0; i < data['categories'].length; i++) {    var comma = document.createTextNode(', ');    var link = document.createElement('a');        link.setAttribute('href', '#journal__category--' + data['categories'][i]['url_title'] );        link.setAttribute('class', 'js--page__link');        link.innerHTML = data['categories'][i]['category_name'];        document.getElementById('js--journal__categories').appendChild(link);        if( (i + 1) != data['categories'].length ) {            document.getElementById('js--journal__categories').appendChild(comma);        }}
Better way to display list of categories
javascript
Here's how I might try to clean things up:refer to object properties without bracket notation where possiblee.g. data.categories.lengthcreate a loop variable for the current category, which allows you to reference it nicely without data.categories[i]for (var i = 0; i < data.categories.length; i++) {    var category = data.categories[i];}don't look up the container on every iteration, move that outside the loop:var container = document.getElementById('js--journal__categories');for (...loop...) {    ...create your node...    container.appendChild(link);}same for creating the comma node, create it outside the loop.you don't need to wrap i + 1 in parenthesis, and this is just my preference, but you should be consistent with spaces. You could also use < instead of != which is more consistent with the for loop. (These are fairly minor nits)if (i + 1 < data.categories.length)Why are you using double dashes and underscores in your element IDs? Comments are helpful to explain what your for loop and if statement is doing, since it's probably easier/quicker to understand the comment than figure out the for loop.Maybe I'm getting overkill at this point, but a way to write really descriptive, easy to read code is to break it into functions whose name makes sense:function createCategoryElement(name, url_title) {    ...create your anchor element here...    ...set its attributes and content, etc...    return element;}I ended up with something like this:var data = {  categories: [    {name: 'one', url_title: 'oneUrl'},    {name: 'two', url_title: 'twoUrl'}  ],};var container = document.getElementById('container');var comma = document.createTextNode(', ');function createCategoryElement(name, url) {  var urlBase = '#journal-category-';  var cssClass = 'js-page-link';  var el = document.createElement('a');  el.setAttribute('href', urlBase + url);  el.setAttribute('class', cssClass);  el.innerHTML = name;  return el;}// Create HTML elements for each category and append them to the DOM.for (var i = 0; i < data.categories.length; i++) {  var category = data.categories[i];  var categoryElement = createCategoryElement(category.name, category.url_title);  container.appendChild(categoryElement);  // Join categories with a comma  if (i + 1 < data.categories.length) {    container.appendChild(comma);  }}        for (...loop over categories...) {            ...            var categoryElement = createCategoryElement(category.name, category.url_title);            container.appendChild(categoryElement);            if (i + 1 < data.categories.length) {                containenr.appendChild(commaElement);            }        }