Плоский объект Typescript для вложенного объекта дерева, как построить его с различными значениями?

Я рекомендую вам использовать для этого метод Array.reduce.

Этот метод позволяет легко преобразовать массив js в объект.

Вы можете сделать что-то вроде следующего:

arr.reduce((accumulator, currentValue)=>{
  if(!accumulator[currentValue.make]){
    accumulator[currentValue.make] = []
  }
  accumulator[currentValue.make][0] = {...<PUT YOUR OBJECT VALUE HERE>}
},{})

Как сказал Аврам, вы можете использовать сокращение. Представьте, что вы создаете функцию, например

  reduce(data:any[],key:string,keyArray:string)
  {
    return data.reduce((a:any[],b:any)=>{
       const element=a.find(x=>x[key]==b[key])
       const value=b[key]
       delete b[key]
       if (!element)
          a.push({[key]:value,[keyArray]:[b]})
       else
          element[keyArray].push(b)
        return a;
    },[])
  }
}

Вы можете использовать таким образом:

 const data=this.reduce(this.data,"make","classification")
 data.forEach(x=>{
   x.classification=this.reduce(x.classification,"classification","segment")
   x.classification.forEach(c=>{
    c.segment=this.reduce(c.segment,"segment","model")
    c.segment.forEach(m=>{
       m.model=this.reduce(m.model,"model","catalogDetail")
       m.model.forEach(d=>d.catalogDetail=d.catalogDetail.map(e=>e.catalogDetail))
    })
   })
 })
 this.dataFormatted=data

Но я думаю, что управлять этим видом древовидной структуры непросто. В общем, у вас есть древовидное представление, и все массивы являются «детскими». Поэтому я предлагаю создать функцию

  reduceChildren(data:any[],key:string)
  {
    return data.reduce((a:any[],b:any)=>{
      const element=a.find(x=>x[key]==b[key])
      const value=b[key]
      delete b[key]
      if (!element)
         a.push({[key]:value,children:[b]})
      else
         element.children.push(b)
       return a;
   },[])
  }

Вы можете использовать как

 const data=this.reduceChildren(this.data,"make")
 data.forEach(x=>{
   x.children=this.reduceChildren(x.children,"classification")
   x.children.forEach(c=>{
    c.children=this.reduceChildren(c.children,"segment")
    c.children.forEach(m=>{
       m.children=this.reduceChildren(m.children,"model")
       m.children.forEach(d=>d.children=d.children.map(e=>e.catalogDetail))
    })
   })
 })
 this.dataFormatted=data

Вы можете увидеть два подхода в этом stackblitz

Похоже, для ввода-вывода вам нужно что-то вроде этого:

const inp = [
  { a: "x", b: "u", c: "q" }, { a: "x", b: "v", c: "r" },
  { a: "x", b: "u", c: "s" }, { a: "x", b: "v", c: "t" },
  { a: "y", b: "u", c: "q" }, { a: "y", b: "u", c: "r" },
  { a: "y", b: "v", c: "s" },
];

const outp = collect(inp, "a", "b", "c");
console.log(outp);
// {x:{u: ["q","s"], v:["r","t"]}, y:{u:["q","r"], v:["s"]}}

где collect() — функция, которая принимает массив объектов и список ключей этих объектов. (Это должен быть хотя бы один ключ, и входные объекты должны иметь значения string для этих ключей.) Наша задача — реализовать collect().

Подход, который я выберу, будет рекурсивным; во-первых, базовый случай, когда вы вызываете collect(inp, key1) только для одной клавиши. В этом случае мы просто хотим вернуть массив значений по ключу key1, который мы можем получить, просто сопоставив входной массив; то есть inp.map(v => v[key1]).

Затем рекурсивный шаг: когда вы вызываете collect(inp, key1, ...keyRest) с более чем одним ключом, на выходе будут ключи, соответствующие свойству key1 элементов inp. В приведенном выше примере, если мы вызовем collect(inp, "a", ...keyRest), то на выходе будут ключи x и y. Для ключа x мы собираем элементы inp, чье свойство a равно "x", в другой массив inpX, и тогда значение ключа x будет collect(inpX, ...keyRest). И аналогично для клавиши y. То есть мы разбиваем входной массив на подмассивы, соответствующие значениям в ключе key1, а затем оцениваем collect(subArr, ...keyRest) для каждого подмассива.

Это словесное описание алгоритма. Давайте посмотрим, что это означает для набора текста для collect():

declare function collect<K extends (keyof T)[], T extends object>(
  arr: (T & Record<K[number], string>)[], ...keys: K): Collect<K>;

type Collect<K extends PropertyKey[]> =
  K extends [any] ? string[] :
  K extends [any, ...infer R extends PropertyKey[]] ? { [k: string]: Collect<R> } :
  never;

Здесь мы говорим, что collect() — это универсальная функция, которая принимает массив элементов объектного типа T и список ключей кортежного типа K. Мы ограничиваемarr так, чтобы каждый элемент массива arr имел тип T и имел свойство string в каждом ключевом элементе кортежа K. И мы ограничиваем K так, чтобы каждый ключевой элемент был некоторым ключом T.

И мы возвращаем значение типа Collect<K>, где Collect<K> сам является рекурсивным условным типом , представляющим объект с вложенными string сигнатурами индекса и базовым типом значения которого является string[].

А теперь о реализации:

function collect(arr: any[], ...keys: string[]) {
  if (!keys.length) throw new Error("need at least one key");
  const [k, ...rest] = keys;

  // base case
  if (!rest.length) return arr.map(v => v[k]);

  // recurse; first collect the sub-arrays for each value at key k
  const subArrays: Record<string, any[]> = {}
  arr.forEach(v => (subArrays[v[k]] ??= []).push(v));

  // then build the return object by calling collect(subArrayVk, ...rest) for each subarray
  const ret: Record<string, any> = {};
  Object.keys(subArrays).forEach(vk => ret[vk] = collect(subArrays[vk], ...rest));
  return ret;
}

Поскольку сигнатура вызова функции возвращает общий условный тип, проще всего сделать функцию перегрузкой с одной сигнатурой вызова , чтобы реализация проверялась свободно. Это просто означает, что у нас есть объявленная сигнатура вызова перед реализацией:

// call signature
function collect<K extends (keyof T)[], T extends object>(
  arr: (T & Record<K[number], string>)[], ...keys: K): Collect<K>;

// implementation
function collect(arr: any[], ...keys: string[]) {
  // ✂ snip, see above
}

Хорошо, давайте проверим это:

const outp = collect(inp, "a", "b", "c");
console.log(outp);
// {x:{u: ["q","s"], v:["r","t"]}, y:{u:["q","r"], v:["s"]}}

Это работает! И ваш пример:

const x = collect(arr, "make", "classification", "segment", "model", "catalogDetail");
console.log(x);
/* {
  "Acura": {
    "Mid SUV": {
      "Competitive Trucks": {
        "RDX": [
          "RDX_SUV_4_Gasoline_2013_Base w/Tech_FWD_3.5_6_105.7_Automatic"
        ]
      }
    },
    "Midsize Car": {
      "Competitive Cars": {
        "TSX": [
          "TSX_Sedan_4_Gasoline_2012_Base w/Tech_FWD_2.4_4_106.4_Automatic"
        ]
      }
    }
  },
  "Aston Martin": {
    "Compact Car": {
      "Competitive Cars": {
        "DB11": [
          "DB11_Convertible_2_Gasoline_2019_Volante_RWD_4.0_8_110.4_Automatic"
        ]
      }
    }
  }
}   */

Это тоже работает!

Площадка ссылка на код