How to convert array of object into nested array of object in Javascript?

Question

I am having an array of objects like this

[
    {
        name: "dhanush",
        goals: ["goal 1","goal 2"],
        goalAmount: ["10000","20000"]
    },
    {
        name: "kumar",
        goals: ["goal 3", "goal 4"],
        goalAmount: ["30000","40000"]
    },
    {
        name: "test",
        goals: ["goal 5"],
        goalAmount: ["50000"],
    }
]

Is that possible to convert the above array of object into the below structure like this

[
  {
    "name": "dhanush",
    "goals": "---",
    "goalAmount":"---",
    "subRows": [
      {
        "name": "",
        "goals": "goal 1",
        "goalAmount":" 10000"
      },
      {
        "name": "",
        "goals": "goal 2",
        "goalAmount":" 20000"
      }
    ]
  },
  {
    "name": "kumar",
    "goals": "---",
    "goalAmount":"---",
    "subRows": [
      {
        "name": "",
        "goals": "goal 3",
        "goalAmount":" 30000"
      },
      {
        "name": "",
        "goals": "goal 4",
        "goalAmount":" 40000"
      }
    ]
  },
  {
    "name": "Test",
    "goals": "goal 5",
    "goalAmount":"50000"
  }
]

In the first data, you can see the user has multiple goals (which means the array length is more than 1), If the goal length is more than one, need to create another key and move the goal data into the above structure like this.

Why I am doing this because I got an ask to create a table that needs to support expandable rows. I used @tanstack/react-table for this row expansion. Here you can find the working demo link - https://codesandbox.io/s/tanstack-table-expansion-1t77ks?file=/src/App.js

In the demo, you can see the row can expand. For the expansion that table requires the data format like this.

I tried to do something like this,

var data = [
    {
        name: "dhanush",
        goals: ["goal 1","goal 2"]
    },
    {
        name: "kumar",
        goals: ["goal 3", "goal 4"]
    },
    {
        name: "test",
        goals: ["goal 5"]
    }
]


let result = data.map((val,i) => {
  return {
    name: val.name,
    ...(val.goals.length === 1 && {goals: val.goals[0]}),
    [val.goals.length > 1 && 'subRows']: data.map((t,j) => {
      return{
       name: "",
       goals: val.goals[j]
      }
       
    }),
  }
})

But the output I am getting like this instead of the actual structure

[
  {
    "name": "dhanush",
    "subRows": [
      {
        "name": "",
        "goals": "goal 1"
      },
      {
        "name": "",
        "goals": "goal 2"
      },
      {
        "name": ""
      }
    ]
  },
  {
    "name": "kumar",
    "subRows": [
      {
        "name": "",
        "goals": "goal 3"
      },
      {
        "name": "",
        "goals": "goal 4"
      },
      {
        "name": ""
      }
    ]
  },
  {
    "name": "test",
    "goals": "goal 5",
    "false": [
      {
        "name": "",
        "goals": "goal 5"
      },
      {
        "name": ""
      },
      {
        "name": ""
      }
    ]
  }
]

Could you please help to achieve this?

updated the expected data structure! Is it possible to make it ? — SDK
– SDK, Commented Jul 24, 2022 at 4:00

CertainPerformance · Accepted Answer · 2022-07-24 04:02:18Z

1

This here

[val.goals.length > 1 && 'subRows']: data.map((tm j) => {

evaluates to false if there's 1 goal or less, and results in the string property false. Then you're mapping the whole data again inside that for some reason. Only map over the goals of the current element you're iterating over, the val.goals.

Because the different possible resulting objects are pretty differently strucured, I think this would be easier to manage if they were entirely separate - return { name, goals: goals[0] } if there's only one goal, and return a completely different object mapping over the goals otherwise.

var data=[{name:"dhanush",goals:["goal 1","goal 2"],goalAmount:["10000","20000"]},{name:"kumar",goals:["goal 3","goal 4"],goalAmount:["30000","40000"]},{name:"test",goals:["goal 5"],goalAmount:["50000"]}];

const result = data.map(({ name, goals, goalAmount }) => {
  return goals.length === 1
    ? { name, goals: goals[0], goalAmount: goalAmount[0] }
    : {
        name,
        goals: '---',
        subRows: goals.map(
          (goal, i) => ({ name: '', goal, goalAmount: goalAmount[i] })
        )
    };
});

console.log(result);

edited Jul 24, 2022 at 4:02

answered Jul 23, 2022 at 17:06

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SDK Over a year ago

Hi, Thanks for the answer. Is it possible to update another key also based on the same condition? I have updated the expected data structure result for you reference. Please let me know the feasibility of it.

CertainPerformance Over a year ago

Use the index while mapping to access the same indexed item in the other array in the object. Remember to include your full input and desired output when first posting a question.

Barmar · Accepted Answer · 2022-07-24 14:09:33Z

1

Don't try to do this all in a single object literal, it's a confusing way to create properties conditionally. Just write normal conditional statements.

To get the goalAmount, use the index argument to the map() callback function so you can get the corresponding element in another array.

var data = [
    {
        name: "dhanush",
        goals: ["goal 1","goal 2"],
        goalAmount: ["10000","20000"]
    },
    {
        name: "kumar",
        goals: ["goal 3", "goal 4"],
        goalAmount: ["30000","40000"]
    },
    {
        name: "test",
        goals: ["goal 5"],
        goalAmount: ["50000"],
    }
]


var result = data.map(({
  name,
  goals,
  goalAmount
}) => {
  let item = {
    name
  };
  if (goals.length == 1) {
    item.goals = goals[0];
    item.goalAmount = goalAmount[0];
  } else {
    item.goals = "---";
    item.subRows = goals.map((g, i) => ({
      name: "",
      goals: g,
      goalAmount: goalAmount[i]
    }));
  }
  return item;
});

console.log(result);

edited Jul 24, 2022 at 14:09

answered Jul 23, 2022 at 17:05

Barmar

789k57 gold badges554 silver badges669 bronze badges

2 Comments

SDK Over a year ago

Hi, Thanks for the answer. Is it possible to update another key also based on the same condition? I have updated the expected data structure result for your reference. Please let me know the feasibility of it.

Barmar Over a year ago

Of course it's possible, just index the goalAmount array the same as the goals array. I've updated the answer.

Collectives™ on Stack Overflow

How to convert array of object into nested array of object in Javascript?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related