Format JSON in jQuery

by Paul Leech

HTML

<span>Original JSON:</span>
<pre id="fJson"></pre>
<span>Formatted JSON:</span>
<pre id="pJson"></pre>

CSS

body {
  font-family: calibri;
}

span {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 18px;
  text-decoration: underline;
  color: blue;
}

pre {
  font-size: 14px;
}

JavaScript

let jData = JSON.parse('{
   "order_coupon_code":"",
   "order_currency":"USD",
   "order_id":"296668745",
   "order_shipping":"b03bd1cb-04be-49ed-94c9-7c456f07e31d",
   "order_store":"",
   "order_subtotal":"150.280000000000000000",
   "order_tax":"12.020000000",
   "order_type":"",
   "order_total":"162.300000000000000000",
   "product_discount":"0, 0, 0, 0, 0",
   "product_id":"D068, D151, E004, D146, D136",
   "product_name": "NorthShore AirSupreme Tab-Style Briefs, Medium, Pack/15; NorthShore MegaMax Tab-Style Briefs, Large, Pack/10; NorthShore Supreme Heavy-Duty Quilted Wipes, X-Large, Travel Pack, Pack/10; NorthShore DoubleStop XL Male Guards, Pack/14; NorthShore DynaDry Pads, Ultimate, Case/90 (3/30s)",
   "product_sku":"1209, 1279, 1955, 1455, 1410",
   "product_quantity":"2.000000000, 2.000000000, 8.000000000, 1.000000000, 1.000000000",
   "product_list_price":"22.850000000, 24.990000000, 2.290000000, 8.990000000, 43.990000000",
   "product_unit_price":"20.570000000, 22.490000000, 2.060000000, 8.090000000, 39.590000000",
   "site_region":"en",
   "site_currency":"USD",
   "page_name":"Checkout Thank You",
   "page_type":"orderConfirmation",
   "user_status":"[email protected]",
   "OneTrustActiveGroups":"102,1,2,103,118,3,4,120,0_126350,0_126351,0_127444,0_126354,0_127431,0_126353,0_128174,0_127443,0_127434,0_127433,0_126355,0_127432,101,104,105,106,107,109,110,111,112,113,114,115,116,119,121,122,123,124,125,126,129,130,131,132,133,134,135,136,137,138,139,140,141,142"}');

alert(jData);
//$('#fJson').html(jData.product_name);
/*
var tmpData = JSON.parse(jData);
var formattedJson = JSON.stringify(tmpData, null, '\t');
$('#pJson').html(formattedJson);
*/