Категоризация массива объектов в новый массив - PullRequest
Новая
       6

Категоризация массива объектов в новый массив

0 голосов
/ 23 октября 2018

У меня есть массив, и мне нужно отобразить этот массив в массив его дочерних элементов. 

var data = [{
    name: 'Cars',
    content: 'BMW',
    value: 2000
  },
  {
    name: 'Cars',
    content: 'Fiat',
    value: 542
  },
  {
    name: 'Cars',
    content: 'Mercedes',
    value: 745
  },
  {
    name: 'Cars',
    content: 'Toyota',
    value: 965
  },
  {
    name: 'Cars',
    content: 'Honda',
    value: 754
  }, {
    name: 'Cars',
    content: 'VW',
    value: 123
  },
  {
    name: 'Cars',
    content: 'Ford',
    value: 200
  },
  {
    name: 'Fruits',
    content: 'Apple',
    value: 500
  }, {
    name: 'Fruits',
    content: 'Orange',
    value: 769
  }, {
    name: 'Fruits',
    content: 'Banana',
    value: 120
  }, {
    name: 'Fruits',
    content: 'Strawberry',
    value: 48
  }, {
    name: 'Fruits',
    content: 'Mango',
    value: 653
  },
  {
    name: 'Colors',
    content: 'Red',
    value: 965
  }, {
    name: 'Colors',
    content: 'Black',
    value: 931
  }, {
    name: 'Colors',
    content: 'BMW',
    value: 423
  }, {
    name: 'Colors',
    content: 'BMW',
    value: 964
  }, {
    name: 'Colors',
    content: 'BMW',
    value: 436
  }
]

Конечный результат, который я хочу, должен быть таким: 

[
  {
    name: "Children Array",
    children: [
      {
        name: "Cars",
        children: [
          {
            name: "BMW",
            value: 2000
          }, 
          {
            name: "Fiat",
            value: 542
          }, 
          {
          ...
          }
        ]
      },
      {
        name: "Fruits",
        children: [
          {
            name: 'Apple',
            value: 500
          }, 
          {
            name: 'Orange',
            value: 769
          }, 
          {
            ...
          }
        ]
      }, 
      {
        name: "Colors",
        children: [
          {
            name: 'Red',
            value: 965
          }, 
          {
            ...
          }
        ]
      }
    ]
  }
]

Это то, что я сделал. 

var data = [{
    name: 'Cars',
    content: 'BMW',
    value: 2000
  },
  {
    name: 'Cars',
    content: 'Fiat',
    value: 542
  },
  {
    name: 'Cars',
    content: 'Mercedes',
    value: 745
  },
  {
    name: 'Cars',
    content: 'Toyota',
    value: 965
  },
  {
    name: 'Cars',
    content: 'Honda',
    value: 754
  }, {
    name: 'Cars',
    content: 'VW',
    value: 123
  },
  {
    name: 'Cars',
    content: 'Ford',
    value: 200
  },
  {
    name: 'Fruits',
    content: 'Apple',
    value: 500
  }, {
    name: 'Fruits',
    content: 'Orange',
    value: 769
  }, {
    name: 'Fruits',
    content: 'Banana',
    value: 120
  }, {
    name: 'Fruits',
    content: 'Strawberry',
    value: 48
  }, {
    name: 'Fruits',
    content: 'Mango',
    value: 653
  },
  {
    name: 'Colors',
    content: 'Red',
    value: 965
  }, {
    name: 'Colors',
    content: 'Black',
    value: 931
  }, {
    name: 'Colors',
    content: 'BMW',
    value: 423
  }, {
    name: 'Colors',
    content: 'BMW',
    value: 964
  }, {
    name: 'Colors',
    content: 'BMW',
    value: 436
  }
]

const layer1 = _.uniqWith(_.map(data, (item) => {
  return item.name
}), _.isEqual)

const newArray = [{
  name: 'Children Array',
  children: _.map(layer1, (item) => {
    return {
      name: item,
      children: _.map(data, (item) => {
        return {

        }
      })
    }
  })
}]

console.log(newArray)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

Я не знаю, как перейти ко второму дочернему слою.

Пожалуйста, совет.

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

Вы также можете сделать это с ES6 только через Object.entries & уменьшите : 

var data = [{ name: 'Cars', content: 'BMW', value: 2000 }, { name: 'Cars', content: 'Fiat', value: 542 }, { name: 'Cars', content: 'Mercedes', value: 745 }, { name: 'Cars', content: 'Toyota', value: 965 }, { name: 'Cars', content: 'Honda', value: 754 }, { name: 'Cars', content: 'VW', value: 123 }, { name: 'Cars', content: 'Ford', value: 200 }, { name: 'Fruits', content: 'Apple', value: 500 }, { name: 'Fruits', content: 'Orange', value: 769 }, { name: 'Fruits', content: 'Banana', value: 120 }, { name: 'Fruits', content: 'Strawberry', value: 48 }, { name: 'Fruits', content: 'Mango', value: 653 }, { name: 'Colors', content: 'Red', value: 965 }, { name: 'Colors', content: 'Black', value: 931 }, { name: 'Colors', content: 'BMW', value: 423 }, { name: 'Colors', content: 'BMW', value: 964 }, { name: 'Colors', content: 'BMW', value: 436 }]

const groupData = (d) => {
  let g = Object.entries(d.reduce((r,c)=>(r[c.name]=[...r[c.name]||[], c],r),{}))
  return g.reduce((r,c) => (r.children.push(
     {name: c[0], children: c[1]}), r),{name: "Children Array", children:[]})}

console.log(groupData(data))

Идея состоит в том, чтобы с помощью первой группировки получить объект с name groups, после чего вы просто получаете entries для этого объекта и reduce для нихчтобы получить окончательный результат.

Также вы начинаете основное уменьшение с помощью предварительно определенного объекта и т. Д.

0 голосов
/ 23 октября 2018

Вы можете сгруппировать данные и дать результат в окончательном виде. 

var data = [{ name: 'Cars', content: 'BMW', value: 2000 }, { name: 'Cars', content: 'Fiat', value: 542 }, { name: 'Cars', content: 'Mercedes', value: 745 }, { name: 'Cars', content: 'Toyota', value: 965 }, { name: 'Cars', content: 'Honda', value: 754 }, { name: 'Cars', content: 'VW', value: 123 }, { name: 'Cars', content: 'Ford', value: 200 }, { name: 'Fruits', content: 'Apple', value: 500 }, { name: 'Fruits', content: 'Orange', value: 769 }, { name: 'Fruits', content: 'Banana', value: 120 }, { name: 'Fruits', content: 'Strawberry', value: 48 }, { name: 'Fruits', content: 'Mango', value: 653 }, { name: 'Colors', content: 'Red', value: 965 }, { name: 'Colors', content: 'Black', value: 931 }, { name: 'Colors', content: 'BMW', value: 423 }, { name: 'Colors', content: 'BMW', value: 964 }, { name: 'Colors', content: 'BMW', value: 436 }],
    result = _(data)
        .groupBy('name')
        .map((group, name) => 
            ({ name, children: _.map(group, ({ content: name, value }) => ({ name, value })) }))
        .value(),
    final = [{ name: "Children Array", children: result }];

console.log(final);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
...