[javascript] es6 - reduce를 이용한 1차원 배열 데이터 2차원 배열로 변환

상황

이번에 프로젝트를 하면서 1차원 배열 데이터를 2차원 배열로 묶어야 하는 상황이 생겨서 방법을 여러가지 생각하다가 그나마 괜찮은 방법을 찾아서 작성하고자 한다.

 

기존 데이터

befotList: [
{
type:'color',
value:'red',
},
{
type:'fruit',
value:'apple',
},
{
type:'color',
value:'blue',
},
{
type:'fruit',
value:'banana',
}
],

원하는 데이터

afterList : [
    {
        "type": "color",
        "value": [
            "red",
            "blue"
        ]
    },
    {
        "type": "fruit",
        "value": [
            "apple",
            "banana"
        ]
    }
]

소스

<script>
     var vm =  new Vue({
        el: '#app',
        data: () => ({
          type: '',
          beforeList: [
            {
              type:'color',
              value:'red',
            },
            {
              type:'fruit',
              value:'apple',
            },
            {
              type:'color',
              value:'blue',
            },
            {
              type:'fruit',
              value:'banana',
            }
          ],
          afterList : [],
        }),
        mounted(){
          let reduceObj = this.beforeList.reduce(function (acc, obj) {
            var key = obj['type'];
            if (!acc[key]) {
              acc[key] = [];
            }
            acc[key].push(obj['value']);
            return acc;
          }, {})
          console.log(reduceObj)

          const resultObject2 = Object.entries(reduceObj).reduce( (arr, [key, name]) => {
          arr.push({ type: key, value:name});
          return arr;
          }, []);
          console.log(resultObject2);
        }
      })
    </script>

확인