Flattening object and limitting number of nesting

Question

I would like to limit number of flattened structures inside an object. Consider example below.

Input:

const exampleObj = {
  foo: {
    bar: {
      biz: "hello"
    }
  }
};

Output:

{foo_bar_biz: "hello"}

I wanted to set a limiter (limit = 2) so that function will stop performing recursive function and return something like this

{foo_bar: "[Object] object"}

Here's a snippet:

const { useState, useEffect} = React;

const exampleObj = {
  foo: {
    bar: {
      biz: "hello"
    }
  }
};

let limit = 0;

function App() {
  const [state, setState] = useState({});

  useEffect(() => {
    flatten(exampleObj);
  }, []);

  const flatten = (data, parent, result = {}) => {
    for (let key in data) {
      const propName = parent ? parent + "_" + key : key;
      if (typeof data[key] === "object") {
        limit++;
        if (limit <= 1) {
          flatten(data[key], propName, result);
        } else {
          setState(prevState => {
            return {
              ...prevState,
              [propName]:
                typeof data[key] === "object" ? "[Object] object" : data[key]
            };
          });
        }
      } else {
        result[propName] = data[key];
        setState({
          ...state,
          [propName]: data[key]
        });
      }
    }
  };

  console.log(state);

  return (
    <div>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>

I've prepared a solution for that, but it is quite cumbersome. https://stackblitz.com/edit/react-u5klvc

Answer 1

Here's one possible implementation of flatten. Notice how it's completely decoupled from React or a specific React component. It works on any JavaScript objects -

const snakecase = s =>
  s.join("_")
  
const flatten = (t = {}, n = Infinity, join = snakecase) =>
{ const many = (t, n, path) =>
    n >= 0 && Object(t) === t
      ? Object.entries(t).flatMap(_ => one(_, n - 1, path))
      : [ [ join(path), t ] ]
      
  const one = ([ k, v ], n, path) =>
    many(v, n, [...path, k])
  
  return Object.fromEntries(many(t, n, []))
}

Given some example data -

const data =
  { a1: 11
  , a2: { b1: 21, b2: 22 }
  , a3: { b1: { c1: 311, c2: 312 }
        , b2: { c1: 321, c2: 322, c3: { d1: 3231 } }
        }
  }

A depth of 1 flattens one level -

flatten(data, 1)

{
  "a1": 11,
  "a2_b1": 21,
  "a2_b2": 22,
  "a3_b1": {
    "c1": 311,
    "c2": 312
  },
  "a3_b2": {
    "c1": 321,
    "c2": 322,
    "c3": {
      "d1": 3231
    }
  }
}

A depth of 2 flattens two levels -

flatten(data, 2) // => ...

{
  "a1": 11,
  "a2_b1": 21,
  "a2_b2": 22,
  "a3_b1_c1": 311,
  "a3_b1_c2": 312,
  "a3_b2_c1": 321,
  "a3_b2_c2": 322,
  "a3_b2_c3": {
    "d1": 3231
  }
}

The default depth is inifinity -

flatten(data) // => ...

{
  "a1": 11,
  "a2_b1": 21,
  "a2_b2": 22,
  "a3_b1_c1": 311,
  "a3_b1_c2": 312,
  "a3_b2_c1": 321,
  "a3_b2_c2": 322,
  "a3_b2_c3_d1": 3231
}

The default join is snakecase, but the parameter can be specified at the call site -

const camelCase = ([ first = "", ...rest ]) =>
  first + rest.map(upperFirst).join("")

const upperFirst = ([ first = "", ...rest ]) =>
  first.toUpperCase() + rest.join("")

flatten(data, 2, camelCase) // => ...

{
  "a1": 11,
  "a2B1": 21,
  "a2B2": 22,
  "a3B1C1": 311,
  "a3B1C2": 312,
  "a3B2C1": 321,
  "a3B2C2": 322,
  "a3B2C3": {
    "d1": 3231
  }
}

Expand the snippet below to verify the results in your own browser -

const data =
  { a1: 11
  , a2: { b1: 21, b2: 22 }
  , a3: { b1: { c1: 311, c2: 312 }
        , b2: { c1: 321, c2: 322, c3: { d1: 3231 } }
        }
  }
  
const snakecase = s =>
  s.join("_")
  
const flatten = (t = {}, n = Infinity, join = snakecase) =>
{ const many = (t, n, path) =>
    n >= 0 && Object(t) === t
      ? Object.entries(t).flatMap(_ => one(_, n - 1, path))
      : [ [ join(path), t ] ]
      
  const one = ([ k, v ], n, path) =>
    many(v, n, [...path, k])
  
  return Object.fromEntries(many(t, n, []))
}

const result =
  flatten(data, 2)

console.log(JSON.stringify(result, null, 2))

Answer 2

Thankyou's answer is great. But this is enough different to be worth posting, I think.

I keep handy functions like path and getPaths in my personal library. For this, I had to alter getPaths to accept a depth parameter (d) to escape earlier.

With these and Object.fromEntries we can easily write a partialFlatten function that does what I think you want:

const path = (ps = []) => (obj = {}) =>
  ps .reduce ((o, p) => (o || {}) [p], obj)

const getPaths = (obj, d = Infinity) =>
  Object (obj) === obj && d > 0
    ? Object .entries (obj) .flatMap (
        ([k, v]) => getPaths (v, d - 1) .map (p => [Array.isArray(obj) ? Number(k) : k, ...p])
      )
    : [[]]

const partialFlatten = (obj, depth) => 
  Object .fromEntries (
    getPaths (obj, depth) .map (p => [p .join ('_'), path (p) (obj)])
  )

const exampleObj = {foo: {bar: {biz: "hello"}, baz: 'goodbye'}}

console .log ('depth 1:', partialFlatten (exampleObj, 1))
console .log ('depth 2:', partialFlatten (exampleObj, 2))
console .log ('depth 3:', partialFlatten (exampleObj, 3))

.as-console-wrapper {max-height: 100% !important; top: 0}