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, Jan 02 '23 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, Jan 02 '23 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, Jan 02 '23 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, Jan 02 '23 at 12:36

Krenom · Answer 1 · 2023-01-03T07:22:27.350

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.

Kredom, a simple reduce is enough, e.g. . this [SO](https://stackoverflow.com/questions/74452136/angular-nested-loop-duplicates/74457442#74457442) — Eliseo, Jan 02 '23 at 14:16

Converting array of object to hierarchical data structure

1 Answers1

Linked