Format and display JSON experiment results in an HTML table

[bonurn]

Hello. I’m new to jsPsych and have all the code working for my experiment. I just need a prettier format to display the results of the experiment than the JSON return of the jsPsych.data.displayData(); call. I’ve tried playing around with different plugins and short of writing the JSON to a local file and opening a new page to read the JSON, I was hoping there was a way to format the results in an HTML table as soon as the experiment ends or maybe as the last trial in the experiment. Can anyone point me to some code where this has been done or suggest a plugin that would make this a simple task?

I have 3 trials in my experiment: an instruction and two HTML slider response trials. Once the experiment is finished I manipulate the data by storing some calculations in 4 custom properties I add to the experiment. Below is my on_finish code for the experiment. Ideally, I would want to display the results to the participant in an HTML table instead of printing the raw JSON data.

on_finish: function() {
			raw_data = jsPsych.data.get().values();
			for (i=1; i < jsPsych.data.get().count(); i++) {
				if(raw_data[i].response < 50) {
					raw_data[i].affinity_label = raw_data[i].labels[0];
					raw_data[i].affinity_value = 100 - raw_data[i].response;
					raw_data[i].aversion_label = raw_data[i].labels[1];
					raw_data[i].aversion_value = raw_data[i].response;
				} else {
					raw_data[i].affinity_label = raw_data[i].labels[1];
					raw_data[i].affinity_value = raw_data[i].response;
					raw_data[i].aversion_label = raw_data[i].labels[0];
					raw_data[i].aversion_value = 100 - raw_data[i].response;
				} // end if-else statement
			} // end for loop
			jsPsych.data.displayData();

Thanks,
Nino

[bonurn]

Naturally, I come up with a solution after I post the question. I was over-complicating it when all I needed to do was use regular javascript. I simply added a for-loop at the end of the on_finish with a few document.writes. It needs more formatting, but this is basically the code.
for (i=1; i < jsPsych.data.get().count(); i++) { document.write(raw_data[i].stimulus); document.write(raw_data[i].affinity_label); document.writeln(raw_data[i].affinity_value); }

Hopefully, this will help someone in the future.