Converting array of object to hierarchical data structure

Question

I have an original array and I want to plot it in tree map which needs a hierarchical data structure.

Original Data:

 [
    {
      "hospital": "hospital 1",
      "drg": "81",
      "Percentage": 96.10584123814279
    },
    {
      "hospital": "hospital 2",
      "drg": "80",
      "Percentage": 96.66666666666667,
      "Incidents": 2.0
    },
    {
      "hospital": "hospital 1",
      "drg": "82",
      "Percentage": 97.1736204576043
    },
    {
      "hospital": "hospital 3",
      "drg": "82",
      "Percentage": 96.58119658119658
    },
    {
      "hospital": "hospital 3",
      "drg": "80",
      "Percentage": 95.83333333333334,
      "Incidents": 3.0
    },
    {
      "hospital": "hospital 3",
      "drg": "81",
      "Percentage": 95.84885577434807
    },
    {
      "hospital": "hospital 4",
      "drg": "82",
      "Percentage": 94.91017964071857,
      "Incidents": 1.0
    },
    {
      "hospital": "hospital 2",
      "drg": "82",
      "Percentage": 95.53072625698324
    },
    {
      "hospital": "hospital 4",
      "drg": "81",
      " Percentage": 95.65987599645705
    },
    {
      "hospital": "hospital 4",
      "drg": "80",
      "Percentage": 96.18320610687023,
      "Incidents": 2.0
    },
    {
      "hospital": "hospital 1",
      "drg": "80",
      "Percentage": 93.5064935064935,
      "Incidents": 4.0
    },
    {
      "hospital": "hospital 2",
      "drg": "81",
      "Percentage": 95.24096385542168
    }
  ]

Desired Result:

[
{
    "hospital": "hospital 1",
     "children" :[
        {"drg": "81","Percentage": 96.10584123814279},
        {"drg": "82","Percentage": 97.1736204576043},
        {"drg": "80","Percentage": 93.5064935064935}
      ]
    
  },
  {
    "hospital": "hospital 2",
    "children" :[
        {"drg": "81","Percentage": 96.10584123814279},
        {"drg": "82","Percentage": 97.1736204576043},
        {"drg": "80","Percentage": 93.5064935064935}
      ]
  },
    {
    "hospital": "hospital 3",
    "children" :[
        {"drg": "82","Percentage": 96.58119658119658},
        {"drg": "80","Percentage": 95.83333333333334},
        {"drg": "81","Percentage": 95.84885577434807}
      ]
  },
    {
    "hospital": "hospital 4",
    "children" :[
        {"drg": "82","Percentage": 94.91017964071857},
        {"drg": "81"," Percentage": 5.65987599645705},
        {"drg": "80","Percentage": 96.18320610687023}
      ]
  }
]

could you please try to format your json to make this somehow understandable? — Chund
– Chund, Commented Jan 2, 2023 at 12:34
Also I am not sure, what this has to do with angular. Did you mean to flag this as a JavaScript question, or TypeScript for that matter? — Chund
– Chund, Commented Jan 2, 2023 at 12:35
Please share the code you've done so far and explain what your issue is. We can help you to fix your code but we are not here to code the algorithm for you. — Carrm
– Carrm, Commented Jan 2, 2023 at 12:35
Hello, you need to put a little more effort making a question in stackoverflow showing us whay you've tried, consider rewriting the question. Good luck — SrArkaitz
– SrArkaitz, Commented Jan 2, 2023 at 12:36

Krenom · Accepted Answer · 2023-01-03 07:22:27Z

This is just basic data parsing/filtering/arranging.

Looks like you have a flat list of hospital/drg results, and you want all those grouped up to just be per hospital.

You tagged Angular, but I'll hit C# first because I know the functions exist:

var sourceList = GetFlatListFromJson();

var result = new List<Hospital>();
foreach(var hospital in sourceList.GroupBy(x => x.hospital)) {
    result.Add(new Hospital {
        Hospital = hospital.Key,
        Children = hospital.Select(x => new Drg{Drg = x.drg, Percentage = x.Percentage})
    });
}

This shows how you can make your own groupBy method for arrays in TS:

type MapFunc<T = any> = (val: T, index?: number, arr?: T[]) => T;

const groupBy = <T = any>(arr: T[], fn: MapFunc<T> | string) =>
  arr.map(isString(fn) ? (val: any) => val[fn] : fn).reduce((acc, val, i) => {
    acc[val] = (acc[val] || []).concat(arr[i]);
    return acc;
  }, {});

With usage:

groupBy([6.1, 4.2, 6.3], Math.floor); // {4: [4.2], 6: [6.1, 6.3]}
groupBy(["one", "two", "three"], "length"); // {3: ['one', 'two'], 5: ['three']}

So you can enact the same logic with this groupBy and map functions in TS; groupBy the hospital name, and then map to the object(s) you actually want.

Edit: Per Eliseo's comment, you can use reduce to the same effect. Always forget that exists as I don't have much cause to process data UI-side, we generally make the server work for its money.

I'll leave the original answer there anyway for those that come after and may have a C# background rather than JS/TS - if nothing else, it breaks down the processing steps a little for understanding rather than jumping into reduce as a blind answer.

Collectives™ on Stack Overflow

Converting array of object to hierarchical data structure

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related