Блог

У меня есть массив объектов, где каждый объект имеет массив значений. Структура данных не идеальна, но это единственный способ получить к ней доступ. Я пытаюсь превратить эту структуру в древовидную структуру, чтобы я мог создать складную таблицу с отступом D3.

Я пытался изменить некоторые предыдущие ответы, которые я нашел, но пока не добился успеха. Вот ссылка на текущий JSFiddle, над которым я работал.

http://jsfiddle.net/COLTstreet/fsve7w2L/25/

Это небольшой пример того, как данные поступают ко мне.

 {
  "data": [
    {
      "items": [
        "All Other",
        "4C FOODS CORP"
      ],
      "hints": {
        "index": 0
      }
    },
    {
      "items": [
        "All Other",
        "PBNA"
      ],
      "hints": {
        "index": 14
      }
    },
    {
      "items": [
        "All Other",
        "PRIVATE LABEL"
      ],
      "hints": {
        "index": 15
      }
    },
    {
      "items": [
        "Base Water",
        "CCNA"
      ],
      "hints": {
        "index": 18
      }
    },
    {
      "items": [
        "Base Water",
        "CRYSTAL GEYSER"
      ],
      "hints": {
        "index": 19
      }
    }
  ]
}
  

Мне нужно, чтобы код заканчивался так:

 [
  {
    "Category": "All Other",
    "children": [
      {
        "name": "4C FOODS CORP"
      },
      {
        "name": "PBNA"
      },
      {
        "name": "PRIVATE LABEL"
      }
    ]
  },
  {
    "Category": "Base Water",
    "children": [
      {
        "name": "CCNA"
      },
      {
        "name": "CRYSTAL GEYSER"
      }
    ]
  }
]
  

Одним из решений является первое использование Array.reduce() в сочетании с деструктурированием для создания object группы элементов по категориям, а на втором этапе используйте Array.map() для сгенерированного объекта entries , чтобы получить желаемый результат:

 const input = {
  "data": [
    {"items": ["All Other", "4C FOODS CORP"], "hints": {"index": 0}},
    {"items": ["All Other", "PBNA"], "hints": {"index": 14}},
    {"items": ["All Other", "PRIVATE LABEL"], "hints": {"index": 15}},
    {"items": ["Base Water", "CCNA"], "hints": {"index": 18}},
    {"items": ["Base Water", "CRYSTAL GEYSER"], "hints": {"index": 19}}
  ]
};

// Group by the category.
let res = input.data.reduce((acc, {items: [cat, val]}) =>
{
    acc[cat] = acc[cat] || [];
    acc[cat].push({name: val});
    return acc;
}, {});

// Generate desired output structure.
res = Object.entries(res).map(([k, v]) => ({category: k, children: v}));

console.log(res);  

 .as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}