Is there a way to execute .map recursively for every array in an array in JavaScript/TypeScript?

user_10419205 0
Viewed 70

I currently have this array which repeats recursively:

 [
    {
      "Name": "Test",
      "Children": [
        {
          "Name": "Id",
          "Property": "Placeholder",
          "Children": [
           {
             "Name": "Child Id",
             "Property": "Placeholder",
             "Children": null
           }
          ]
        }
    }
]

To get the structure I want I currently have this:

const fixed = data.map(item => item = {
        data: {
            name: item.Name,
        },
        children: item.Children.map(child => child = {
            name: child.Name,
        })
    }
  )

Is there a way to repeat my initial array.map recursively for each child array?

typescript javascript
3 Answers

One possible solution, based on the output I believe you want:

const array = [{
  "Name": "Test",
  "Children": [{
    "Name": "Id",
    "Property": "Placeholder",
    "Children": [{
      "Name": "Child Id 1",
      "Property": "Placeholder",
      "Children": null
    }, {
      "Name": "Child Id 2",
      "Property": "Placeholder",
      "Children": [{
        "Name": "Child Id 3",
        "Property": "Placeholder",
        "Children": null
      }]
    }]
  }]
}];


const map = (arr) => {
  return arr ? arr.map(fix) : null;
}

const fix = (item) => {
  return {
    data: {
      name: item.Name
    },
    children: map(item.Children),
  };
}

console.log(map(array))

Or as suggested below, use shortands:

const map = arr => arr ? arr.map(fix) : null;

const fix = item => ({
  data: {
    name: item.Name
  },
  children: map(item.Children),
});
user_36254440

We can use a base case where we check if the Children property is null,if so recursion stops and we return the Name:

const data = [{"Name": "Test", "Children": [{"Name": "Id","Property": "Placeholder","Children": [{"Name": "Child Id","Property": "Placeholder","Children": null }] }] }];

const flattenData = (data) => {
    return data.map(d => {
    //Base case, recursion stops here
    if(!d.Children){
      return d.Name;
    }
    //Continue recursion
    return {data: {name: d.Name},  children: flattenData(d.Children) }
   });
}
console.log(flattenData(data));

user_38887660

You can create a function that transforms children. If the child has other children, then the function will call itself to transform them recursively.

const input = [
    {
        "Name": "Test",
        "Children": [
            {
                "Name": "Id",
                "Property": "Placeholder",
                "Children": [
                    {
                        "Name": "Child Id",
                        "Property": "Placeholder",
                        "Children": null
                    }
                ]
            }
        ]
    }
];

const transformChildren = children => children.map(child => ({
    name: child.Name,
    children: child.Children ? transformChildren(child.Children) : null
}));

const output = input.map(item => ({
    data: {
        name: item.Name,
    },
    children: item.Children ? transformChildren(item.Children) : null
}))

console.log(output)

user_10217030
Related