JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<textarea name="" id="input" cols="30" rows="10"></textarea>
<pre id="out"></pre>

JavaScript

const input = document.querySelector('#input');
const json = JSON.stringify({
	foo: {
		bar: JSON.stringify({
			baz: JSON.stringify('quux')
		})
	}
});

out.textContent += json + '\n\n';

function parseNested(value) {
	if (Array.isArray(value)) {
		return value.map(parseNested);
	} else if (value && typeof value === 'object') {
  	return Object.fromEntries(Object.entries(value).map(([k, v]) => [k, parseNested(v)]));
  } else if (typeof value === 'string') {
  	try {
	  	const parsed = JSON.parse(value);
      return parseNested({ $nested: parsed });
  	} catch (error) {

	    if (!error instanceof SyntaxError) {
  		  throw error;
	    }
	    return value;
    }
  } else {
	  return value;
  }
}


input.oninput = () => {
	const final = parseNested(input.value);
	out.textContent = JSON.stringify(final, null, 2);
}