import _ from 'lodash';
import $ from 'jquery';

function renderList(data) {
	var element = $('div.main');
	_.forEach(data.items, function(item) {
		element.append($('<p></p>').text(item.title));
	});
}

function renderGroup(data) {
	var element = $('#accordion');
	_.forEach(data.items, function(item) {
		var itemIndex = item.index;
 		var headingId = 'heading' + itemIndex;
 		var collapseId = 'collapse' + itemIndex;

 		var itemElement = $('<div class="panel panel-default"></div>');

	 	var headingElement = $('<div class="panel-heading" role="tab" id="' + headingId + '"></div>');
	 	var titleElement = $('<h4 class="panel-title"></h4>');
	 	var link = $('<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#' + collapseId + '" aria-expanded="false" aria-controls="' + collapseId + '">');
	 	link.text(item.title);
	 	titleElement.append(link);
	 	headingElement.append(titleElement);
	 	itemElement.append(headingElement);

	 	var collapseElement = $('<div id="' + collapseId + '" class="panel-collapse collapse" role="tabpanel" aria-labelledby="' + headingId + '"></div>');
	 	var bodyElement = $('<ul class="list-group"></ul>');
        _.forEach(_.take(item.words, 100), function(word) {
		 	var bodyItemElement = $('<li class="list-group-item">Bootply</li>');
		 	bodyItemElement.text(word);
		 	bodyElement.append(bodyItemElement);
        });

	 	collapseElement.append(bodyElement);
	 	itemElement.append(collapseElement);

	 	element.append(itemElement);
	});
}

export function render() {
	$.getJSON('data/work.json', renderGroup);
}

@@ -501,33 +501,33 @@
 dingElement = $(
-'
+%60
 %3Cdiv class=%22pane
@@ -552,20 +552,18 @@
 ab%22 id=%22
-' + 
+$%7B
 headingI
@@ -559,36 +559,33 @@
 %22$%7BheadingId
- + '
+%7D
 %22%3E%3C/div%3E
 ');%0A%09 %09var t
@@ -564,33 +564,33 @@
 adingId%7D%22%3E%3C/div%3E
-'
+%60
 );%0A%09 %09var titleE
@@ -650,17 +650,17 @@
 ink = $(
-'
+%60
 %3Ca class
@@ -741,20 +741,18 @@
  href=%22#
-' + 
+$%7B
 collapse
@@ -753,20 +753,17 @@
 llapseId
- + '
+%7D
 %22 aria-e
@@ -793,20 +793,18 @@
 ntrols=%22
-' + 
+$%7B
 collapse
@@ -809,15 +809,12 @@
 seId
- + '%22%3E'
+%7D%22%3E%60
 );%0A%09
@@ -971,25 +971,25 @@
 Element = $(
-'
+%60
 %3Cdiv id=%22' +
@@ -985,20 +985,18 @@
 div id=%22
-' + 
+$%7B
 collapse
@@ -997,20 +997,17 @@
 llapseId
- + '
+%7D
 %22 class=
@@ -1065,20 +1065,18 @@
 lledby=%22
-' + 
+$%7B
 headingI
@@ -1080,20 +1080,17 @@
 ngId
- + '
+%7D
 %22%3E%3C/div%3E
 ');%0A
@@ -1085,17 +1085,17 @@
 %22%3E%3C/div%3E
-'
+%60
 );%0A%09 %09va
@@ -1266,15 +1266,8 @@
 em%22%3E
-Bootply
 %3C/li

Use string interpolation.