Building categories block based on JSON

Question

I'm not even sure if this is how you're supposed to do it, but this is what I have so far:

$.getJSON("/api/get_categories", function(data){
    var items = [];
   $.each(data["categories"], function(key, value){

    items.push('<div class="card"><div class="card waves-effect waves-block waves-light"</div><div class="card-content"><span class="card-title activator grey-text text-darken-4">'+value+'</span></div></div>');
   });

   $("#categories").html(items.join(""));

});

The issue is that the string within my push looks really awkward and long. What's the better way of doing this?

Answer 1

I have a few issues with your code before I get into your actual question:

• Your indentation is inconsistent and wrong, you should be using two or four space indentation, not three-space indentation.
• Your usage of quotation marks is inconsistent, use either " or ', but stay consistent.
• BUG: you're missing a close html tag character in here: <div class="card waves-effect waves-block waves-light"</div>.
• Instead of pushing it into the block as one big lump, consider pushing it through at each category, that way it'll actually look like it's loading, and you can avoid storing a massive html string. You can use jQuery's .append to do this

As for your specific question, I would style it better by splitting it into parts, and joining each part like so:

$.getJSON('/api/get_categories', function(data){
    $.each(data.categories, function(key, value){
        $('#categories').append(
            '<div class="card">' +
            '<div class="card waves-effect waves-block waves-light"></div>' +
            '<div class="card-content">' +
            '<span class="card-title activator grey-text text-darken-4">' +
            value + '</span></div></div>'
        );
    });
});

Answer 2

I would use a templating engine like underscore to keep all your markup separate.