How do I create a flat array from a nested array of objects in javascript recursively?

Question

I want to convert the following data structure:

const data = [
  {
    regions: ['United States', 'Canada']
  },
  {
    regions: ['United States']
  },
  {
    prop1: {
      regions: ['Canada']
    }
  },
  {
    prop2: [
      {
        regions: ['Mexico', 'United States'],
        prop3: {
          regions: ['Canada']
        }
      }
    ]
  }
];

into the following data structure:

['United States', 'Canada', 'United States', 'Canada', 'Mexico', 'United States', 'Canada']

I'm looking to do this with ES6 using .reduce and .map recursively to be safe.

This is what i've tried so far but it only goes 2 levels deep:

export const flattenArray = (arr: Object[], prop: string): any[] =>
  arr.reduce(
    (a, c) => [
      ...new Set([
        ...a,
        ...c.map(x => x[prop]).reduce((y, z) => [...y, ...z.map(j => j)], []),
      ]),
    ],
    []
  );

UPDATE: I've wen't with @deterjan and his solution below. Incase anyone needs a non .flat version this is his solution in a single function with .reduce

export const flatten = (obj: any, prop: string): any[] => [
  ...new Set(
    Object.keys(obj).reduce((a, c) => {
      if (c === prop) {
        if (isArray(obj[prop])) {
          return [...a, ...obj[c]];
        } else {
          return [...a, obj[c]];
        }
      } else if (isArray(obj[c])) {
        return [
          ...a,
          ...obj[c].reduce((a, c) => [...a, ...flatten(c, prop)], []),
        ];
      } else if (isObject(obj)) {
        return [...a, ...flatten(obj[c], prop)];
      } else {
        return a;
      }
    }, [])
  ),
];

console.log(flatten(data, 'regions'));

@ThomasSablik i've added to the post with what i've tried so far now. — Steven Grimaldo, Nov 21 '20 at 01:01

deterjan · Accepted Answer · 2020-11-21T01:23:42.680

Not sure if this what you are looking for but the following code recursively maps objects and arrays to their "regions" key, flattening at each step.

function isArray(what) {
    return Object.prototype.toString.call(what) === '[object Array]';
}

function searchObj(obj) {
    return Object.keys(obj).map(key => {
        if (key == "regions" && isArray(obj.regions)) return obj[key];
        else if (isArray(obj[key])) return searchArray(obj[key]);
        else if (typeof obj === "object") return searchObj(obj[key]);
        else return [];
    }).flat();
}

function searchArray(obj) {
    return obj.map(elem => searchObj(elem)).flat();
}

Usage:

searchObj(data)
> ["United States", "Canada", "United States", "Canada", "Mexico", "United States", "Canada"]

Edit: Here is an Array.flat() polyfill from https://unpkg.com/array-flat-polyfill@1.0.1/index.js

Array.prototype.flat||Object.defineProperty(Array.prototype,"flat",{configurable:!0,value:function r(){var t=isNaN(arguments[0])?1:Number(arguments[0]);return t?Array.prototype.reduce.call(this,function(a,e){return Array.isArray(e)?a.push.apply(a,r.call(e,t-1)):a.push(e),a},[]):Array.prototype.slice.call(this)},writable:!0}),Array.prototype.flatMap||Object.defineProperty(Array.prototype,"flatMap",{configurable:!0,value:function(r){return Array.prototype.map.apply(this,arguments).flat()},writable:!0})

Yea i think this is great, i would just need to figure out how to do this without using `.flat()` since i need to support IE. So like `.reduce` and `.map`. — Steven Grimaldo, Nov 21 '20 at 01:12
edited answer to add polyfill, you can also use a custom function for flattening which is trivial to implement with reduce() and concat(). — deterjan, Nov 21 '20 at 01:24
thank you! this was super helpful, i kept getting stuck in the recursion and where to do it - this helped me a lot. — Steven Grimaldo, Nov 21 '20 at 04:51

score 0 · Answer 2 · answered Nov 21 '20 at 03:08

this is a solution using the object as json and then search in it using a regex expresion.I guess that exist other way to build the regex on better way, cause I had to use the replace method to remove the quotes.You can use some tool to measure the performance.

const data = {
  sourceId: {
    S: "some_string"
  },
  ignored: {
    BOOL: false
  },
  stepFunctionArn: {
    S: "some_string"
  },
  certificate: {
    BOOL: true
  },
  infoNeeded: {
    L: [
      "Array"
    ]
  },
  queuesLinks: {
    M: [
      "Object"
    ]
  },
};


[...JSON.stringify(data).matchAll(/(?:\"regions\"\:\[)(?:\")(.*?)(?:\")\]/gi)].reduce(function(a, v) {
  a = a.concat(v[1].replace(/\"/g,"").split(','));
  return a;
}, [])

How do I create a flat array from a nested array of objects in javascript recursively?

2 Answers2