JSON Roundtrip

Turn objects into JSON text, then parse them back.

Starter data

The page begins with an array of player objects.

Ready to convert the roster.

JavaScript value

JSON string

Important HTML

JavaScript writes into these two view areas and listens for the action buttons.

<button id="stringify-data" type="button">JSON.stringify</button>
<button id="parse-data" type="button">JSON.parse</button>
<button id="reset-data" type="button">Reset demo</button>
<p id="status-message">Ready to convert the roster.</p>
<div id="object-view"></div>
<div id="json-view"></div>

Important JavaScript

Turn a value into a JSON string, then parse that string back into a value.

const asText = JSON.stringify(players);
const asValue = JSON.parse(asText);