JavaScript Tutorial

The language for programming web pages.

JS JSON

JavaScript JSON

JSON stands for JavaScript Object Notation. JSON is a lightweight format for storing and transporting data. JSON is often used when data is sent from a server to a web page.

Key Methods:

JSON.stringify(obj) — Convert JS object to JSON string
JSON.parse(str) — Convert JSON string to JS object

Rules:

Keys must be strings in double quotes
Values: string, number, boolean, null, array, object
No trailing commas, no comments
No undefined or functions

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<body style="font-family:Arial;padding:20px;">
<h2>JSON Converter</h2>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;">
  <div>
    <label style="font-weight:bold;">JS Object (Input):</label>
    <textarea id="jsInput" rows="8" style="width:100%;padding:10px;border:2px solid #f7df1e;border-radius:5px;font-family:monospace;resize:none;">{"name":"Ali","age":22,"courses":["HTML","CSS","JS"],"active":true,"score":null}</textarea>
    <button onclick="parseJSON()" style="width:100%;padding:10px;background:#28a745;color:white;border:none;border-radius:5px;cursor:pointer;font-weight:bold;margin-top:5px;">JSON.parse() →</button>
  </div>
  <div>
    <label style="font-weight:bold;">Parsed & Stringified:</label>
    <div id="out" style="background:#1e1e1e;color:#98c379;padding:10px;border-radius:5px;font-family:monospace;font-size:13px;height:170px;overflow:auto;"></div>
    <button onclick="stringify()" style="width:100%;padding:10px;background:#1572B6;color:white;border:none;border-radius:5px;cursor:pointer;font-weight:bold;margin-top:5px;">JSON.stringify()</button>
  </div>
</div>
<script>
let parsed;
function parseJSON() {
  try {
    parsed = JSON.parse(document.getElementById("jsInput").value);
    let html = "<b>Parsed Object:</b><br>";
    for(const [k,v] of Object.entries(parsed)){
      html += k+": <span style=\'color:#e5c07b\'>"+JSON.stringify(v)+"</span><br>";
    }
    document.getElementById("out").innerHTML = html;
  } catch(e) { document.getElementById("out").innerHTML = "❌ "+e.message; }
}
function stringify() {
  if(!parsed){parseJSON();return;}
  document.getElementById("out").innerHTML =
    "<b>Compact:</b><br>"+JSON.stringify(parsed)+"<br><br>"+
    "<b>Pretty (2 spaces):</b><br>"+JSON.stringify(parsed,null,2).replace(/
/g,"<br>").replace(/ /g,"&nbsp;");
}
parseJSON();
</script>
</body></html>

Result

Topics

JS Introduction JS Where To JS Output JS Variables JS Data Types JS Functions JS Objects JS Arrays JS Strings JS If Conditions JS Loops JS Math JS Errors JS Scope JS DOM JS Events JS Promises & Async JS Classes JS JSON JS RegExp