JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<div>
  <strong>Before</strong>
  <pre id="before">test</pre>
</div>

<div>
  <strong>After</strong>
  <pre id="after">test</pre>
</div>

CSS

body {
  font-family: monospace;
  font-size: calc(16px + 1vmin);
  background: #333;
  color: #eee;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 1rem;
}

JavaScript

const testObject = {"pricing":{
            "rate":15.00,
            "perSubscriptionMinima":{
                "value":12.3750,
                "discount":33.3,
                "multiplier":"2x",
              },
            "ppr":0.0022,
            "mv":true,
         }}

/**
 * Flatten a multidimensional object
 *
 * For example:
 *   flattenObject{ a: 1, b: { c: 2 } }
 * Returns:
 *   { a: 1, c: 2}
 */
const flattenObject = (obj) => {
  const flattened = {}

  Object.keys(obj).forEach((key) => {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      Object.assign(flattened, flattenObject(obj[key]))
    } else {
      flattened[key] = obj[key]
    }
  })

  return flattened
}


// Render example
document.getElementById('before').innerHTML = JSON.stringify(testObject, null, 2)
document.getElementById('after').innerHTML = JSON.stringify(flattenObject(testObject), null, 2)