reactjstypescriptrecursive-datastructures

Recursive function to restructure an array of object


I'm currently working on displaying item.

But im stuck because the data structure is super nested. This is the original structure:

[
  {
    "key": "name",
    "value": "Johnweak",
    "title": "name",
    "type": "input"
  },
  {
    "key": "lastname",
    "value": "weak",
    "title": "lastname",
    "type": "input"
  },
  {
    "key": "cert",
    "value": "Certificate",
    "title": "Certificate",
    "type": "object",
    "children": [
      {
        "key": "cert1",
        "value": "cert1",
        "title": "Certificate 1",
        "type": "object",
        "children": [
          {
            "key": "cert1uni",
            "value": "cert1uni",
            "title": "Cert 1 University name",
            "type": "input"
          },
          {
            "key": "cert1cgpa",
            "value": "cert1cpga",
            "title": "Cert 1 CGPA",
            "type": "input"
          }
        ]
      },
      {
        "key": "cert2",
        "value": "cert2",
        "title": "Certificate 2",
        "type": "object",
        "children": [
          {
            "key": "cert2uni",
            "value": "cert2uni",
            "title": "Cert 2 University name",
            "type": "input"
          },
          {
            "key": "cert2cgpa",
            "value": "cert2cgpa",
            "title": "Cert 2 CGPA",
            "type": "input"
          }
        ]
      }
    ]
  },
  {
    "key": "dob",
    "value": "2022-02-31",
    "title": "Date of birth",
    "type": "dropdown"
  }
]

So in this case, Im supposed to make a recursive function to loop thru it and restructure to a new array of object such as:

[
  {
    "key": "name",
    "value": "Johnweak",
    "title": "name",
    "type": "input"
  },
  {
    "key": "lastname",
    "value": "weak",
    "title": "lastname",
    "type": "input"
  },
  {
    "key": "cert1uni",
    "value": "cert1uni",
    "title": "Cert 1 University name",
    "type": "input"
  },
  {
    "key": "cert1cgpa",
    "value": "cert1cpga",
    "title": "Cert 1 CGPA",
    "type": "input"
  },
  {
    "key": "cert2uni",
    "value": "cert2uni",
    "title": "Cert 2 University name",
    "type": "input"
  },
  {
    "key": "cert2cgpa",
    "value": "cert2cpga",
    "title": "Cert 2 CGPA",
    "type": "input"
  },
  {
    "key": "dob",
    "value": "2022-02-31",
    "title": "Date of birth",
    "type": "dropdown"
  }
]

this is my current code.

const nestedArray = (array) => {
   let A = [];
   array.map((item) => {
       if((item.type === "object" && item.children) {
           Object.assign(A, item.children);
           nestedArray(A);  
       } else {
           Object.assign(item);
       }
   }
}

But it doesn't really work tho :( Does anyone know how to fix it?


Solution

  • You want to skip items that are parent of others, and accumulate only leaves (non parent items) in a single array:

    function nestedArray(array) {
      return array.flatMap((item) => {
        if ((item.type === "object" && item.children) {
          return nestedArray(item.children);
        } else {
          return item; // Leaf (non parent)
        }
      });
    }