How to convert the JSON into nested Array format in typescript?

Question

I am trying to convert the JSON to nested array format. The following one is my JSON data:

{
  "items": {
    "BMW": {
      "group": "car",
      "title": "BMW car"
    },
    "320": {
      "group": "BMW",
      "title": "320 Mod"
    },
    "X3": {
      "group": "BMW",
      "title": "X3"
    },
    "X5": {
      "group": "BMW",
      "title": "X5 Mod"
    },
    "Ford": {
      "group": "car",
      "title": "Ford car"
    },
    "Fiesta": {
      "group": "Ford",
      "title": "Fiesta Mod"
    },
    "Focus": {
      "group": "Ford",
      "title": "Focus Mod"
    }
  }
}

The JSON data has group. Based on that group I need to convert dynamically into desired array format. Below array is my expected output. Can anyone please help me to write program in typescript.

arrayObj = [
  {
    Name: "BMW car",
    id:"BMW",
    group: "car",
    children: [
      { Name: "320 Mod", id:"320", group: "BMW" },
      { Name: "X3 Mod", id:"X3", group: "BMW" },
      { Name: "X5 Mod", id:"X5", group: "BMW" }
    ]
  },
  {
    Name: "Ford car",
    group: "car",
    id: "Ford",
    children: [
      { Name: "Fiesta Mod", id:"Fiesta", group: "Ford" },
      { Name: "Focus Mod", id:"Focus", group: "Ford" }
    ]
  }
];

Self implementing and converting. :) There is no general function for this. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Numichi
– Numichi, Commented Nov 4, 2020 at 10:45

Owen Kelvin · Accepted Answer · 2020-11-04 13:59:47Z

1

You can use reduce() function to achieve this, see code below

const initialObject = {
  "items": {
    "BMW": {
      "group": "car",
      "title": "BMW"
    },
    "320": {
      "group": "BMW",
      "title": "320"
    },
    "X3": {
      "group": "BMW",
      "title": "X3"
    },
    "X5": {
      "group": "BMW",
      "title": "X5"
    },
    "Ford": {
      "group": "car",
      "title": "Ford"
    },
    "Fiesta": {
      "group": "Ford",
      "title": "Fiesta"
    },
    "Focus": {
      "group": "Ford",
      "title": "Focus"
    }
  }
}
const finalData = Object.values(Object.values(initialObject.items).reduce((prev, {group, title}) => {
  let children = prev[group]?.children
  if (!children) {
    children = []
  }
  children.push({name: title, group })
  return {...prev, [group]: {
    name: group,
    group:title,
    children
  }}
}, {}))


console.log(finalData)

answered Nov 4, 2020 at 13:59

Owen Kelvin

15.1k11 gold badges51 silver badges86 bronze badges

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

2 Comments

Muthukani K Over a year ago

Thank you @Kelvin Owen for the answer. It is working but I am getting wrong array 0: {name: "BMW", group: "X5", children: Array(3)} 1: {name: "car", group: "Ford", children: Array(2)} 2: {name: "Ford", group: "Focus", children: Array(2)}

Muthukani K Over a year ago

The group name is wrong. I am working on that still. Do you have any Idea??

Collectives™ on Stack Overflow

How to convert the JSON into nested Array format in typescript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related