Interprétation HTML d'un objet js littéral simple

Côté JavaScript

	function objectToDl(o)
	{
		let objectKeys = Object.keys(o);
		return '<dl>'
			+ objectKeys.map(key => {
				let value = typeof o[key] === 'object' ?
					objectToDl(o[key]) : `'${o[key]}'<span>,</span>`;
				return `<dt>${key}</dt><dd>${value}</dd>`;
			})
			.join('')
			+ '</dl>';
	}

Côté CSS

dl {
	background: #80000022;
	border: 1px dotted maroon;
	display: inline-block;
	font-size: 1.2rem;
	margin-left: 1.2rem;
	overflow: hidden;
	padding-left: 2.4rem;
}
dl::before,
dl::after {
	content: '{';
	float: left;
	margin-left: -2rem;
}
dl::after {
	clear: both;
	content: '}';
}
dt,
dd {
	float: left;
}
dt {
	clear: left;
}
dd {
	margin-left: .4rem;
	position: relative;
}
dd:not(:last-child) > dl::after {
	content: '},';
}
dt::after {
	content: ':';
}
dd:last-child > span {
	display: none;
}