Javascript Question posted in
A very good W3school tutorial can be found here.

How to change array of object to new array of object with conditions using javascript

I have array of object and need to modify and return new array of object

For the below array of object, i need to return new array of object with label, value and children props using javascript.

should change every property value to label, value and if property value is array then embed in children prop as shown in expected output

var arrobj = [
  {
    title: "Test A",
    group: ['Travel', 'Health'],
    details: {
      'Travel': ['domestic', 'international'],
      'Health': ['hospital']
   }
  },
  {
    title: "Test B",
    group: ['Finance'],
    details: {
      'Finance': ['family']
   }
  }
]

Expected Output:

[
 {
   value: "Test A",
   label: "Test A",
   children: [
     {
       value: 'Travel', label: 'Travel',
       children: [
        { value: 'domestic', label: 'domestic'},
        { value: 'international', label: 'international'},
      ]
     },
     {
       value: 'Health', label: 'Health',
       children: [
        { value: 'hospital', label: 'hospital'},
      ]
     }  
   ]
 },
 {
   value: "Test B",
   label: "Test B",
   children: [
      { 
        value: 'Finance', label: 'Finance',
        children: [
          { value: 'family', label: 'family'},
        ]
      }
   ]
 }

]


Tried

arrrobj.map(e=> {
  label: e.title,  
  value: e.title,
  children: [
     {
       label: e.group;
       value: e.group;
       children: e.details.Travel
     }
   ]
})
Tags:

3

Answers


  1. 0

    Here’s a solution:

    arrobj.map(obj => ({
  value: obj.title,
  label: obj.title,
  children: obj.group.map(group => ({
    value: group,
    label: group,
    children: obj.details[group].map(detail => ({
      value: detail,
      label: detail
    }))
  }))
}))

    var arrobj = [{
    title: "Test A",
    group: ['Travel', 'Health'],
    details: {
      'Travel': ['domestic', 'international'],
      'Health': ['hospital']
    }
  },
  {
    title: "Test B",
    group: ['Finance'],
    details: {
      'Finance': ['family']
    }
  }
];

const output = arrobj.map(obj => ({
  value: obj.title,
  label: obj.title,
  children: obj.group.map(group => ({
    value: group,
    label: group,
    children: obj.details[group].map(detail => ({
      value: detail,
      label: detail
    }))
  }))
}));

console.log(output);
    Login or Signup to reply.
  2. 0

    like this ?

    arrobj.map(obj => {
        const children = Object.keys(obj.details).map(value => ({
          value,
          label: value,
          children: obj.details[value].map(child => ({value: child, label: child}))
        }))
        return {
          value: obj.title,
          label: obj.title,
          children
        }
      })

    or is there any more message ?

    Login or Signup to reply.
  3. 0 
    var arrobj = [
    {
      title: "Test A",
      group: ['Travel', 'Health'],
      details: {
        'Travel': ['domestic', 'international'],
        'Health': ['hospital']
     }
    },
    {
      title: "Test B",
      group: ['Finance'],
      details: {
        'Finance': ['family']
     }
    }
  ]

  const convertToTree = arrobj.reduce((acc, item)=>{

    const children = Object.entries(item.details).reduce((groupAcc,[group, details])=>{
        groupAcc.push({
            value: group,
            label: group,
            children:details.map(detail => ({
                value:detail,
                label:detail
            }))
        });
        return groupAcc;
    }, []);
    acc.push({
        value:item.title,
        label: item.title,
        children
    })
    return acc
  },[])

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

Back To Top
Search