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>'
 );
 });
});

• Stupid.Fat.Cat: Thank you! This is way more than what I asked for, but thank you for pointing out all of those issues.

Answer 2

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

• SirPython: Please add more to your post. Why would you suggest this? Why is this better than what the OP is doing? Your post is very thin right now and is likely to be deleted.
• RubberDuck: Sounds like a perfectly reasonable answer to me, but could use some more explaination. Maybe an example.
• anon: @RubberDuck I can't find a source, but I remember a meta post where we discussed "generic suggestion without reason, explanation, example, or making it clear the poster read the question at all" not making a valid answer.