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 = {
  a: 1,
  b: {
    c: 2,
    d: {
      e: {
        f: 3
      }
    }
  }
}

/**
 * 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) */

const clone = JSON.parse(JSON.stringify(testObject));


clone.b.d.e.f = 5;

console.log("testObject", testObject)
console.log("Clone", clone)