Question 73858 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Recursive function to restructure an array of object – Reactjs

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?

Tags:

2

Answers


  1. 0

    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)
    }
  });
}
    Login or Signup to reply.
  2. 0 
    const nestedArray = (arr, output = [], depth = 0) => {
   arr.forEach((item) => {
       if(item.type === "object" && item.children) {
           depth +=1
           output.push(nestedArray(item.children))  
       } else {
           output.push(item)
       }
   })
   return output.flat(depth);
}

const arr = [
  {
    "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": "cert3",
        "value": "cert3",
        "title": "Certificate 3",
        "type": "object",
        "children": [
          {
            "key": "cert2uni",
            "value": "cert2uni",
            "title": "Cert 3 University name",
            "type": "input"
          },
          {
            "key": "cert3cgpa",
            "value": "cert3cgpa",
            "title": "Cert 3 CGPA",
            "type": "input"
          }
        ]
      }
        ]
      }
    ]
  },
  {
    "key": "dob",
    "value": "2022-02-31",
    "title": "Date of birth",
    "type": "dropdown"
  }
];

console.log(nestedArray(arr))
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search