빠바
199
2019-12-11 15:31:25
4
354

자바스크립트 배열 전문가 계신가요? 기존 배열을 원하는 배열로 만들려고 합니다.


{ data : 2, name: A, seq: 1}

{ data : 1, name: A, seq: 2}

{ data : null, name: A, seq: 3}

{ data : 3, name: A, seq: 4}

{ data : 5, name: A, seq: 5}

{ data : 7, name: A, seq: 6}

{ data : 9, name: A, seq: 7}

{ data : null, name: B, seq: 1}

{ data : 3, name: B, seq: 2}

{ data : 2, name: B, seq: 3}

{ data : 6, name: B, seq: 4}

{ data : 1, name: B, seq: 5}

{ data : 2, name: B, seq: 6}

{ data : 8, name: B, seq: 7}


위의 디비 조회값을 아래의 형태로 만드려고합니다.

차트의 데이터로 사용하려고 해요.

   

{ name : A, data: {2, 1, null, 3, 5, 7, 9}}

{ name : B, data: {null, 3, 2, 6, 1, 2, 8}}



기존에 짜놓은 로직이 있는데 거기서 리팩토링 해보려 합니다. 그전에 자바스크립트 고수분들의 생각을 참고해보고 싶어요.


아래부분은 제가 신입때 작성한 코드입니다. 



                        // 전체 데이터를 루프 돌린다         

for(var i = 0; i < data.length; i++){

var indexA = '';

if(name != data[i].name){

dataInfo[name] = dataArr;

seriesObj['name'] = name; // 'SK Hynix TSV(CPS)'

        seriesObj['data'] = dataInfo[name]; //  ['1',  '2',  '0',  '0'];

        lastSeriseArr.push(seriesObj);

dataArr = new Array(uniqXAxisArr.length);

for(var y = 0; y < dataArr.length; y++){

dataArr[y] = 0;

}

indexA = uniqXAxisArr.indexOf(data[i].XAXISNAME);

dataArr[indexA] = data[i].VALUE;

        seriesObj = new Object();

}else{

indexA = uniqXAxisArr.indexOf(data[i].XAXISNAME);

dataArr[indexA] = data[i].VALUE;

}

name = data[i].name;

}

dataInfo[name] = dataArr;

seriesObj['name'] = name;

        seriesObj['data'] = dataInfo[name];

        lastSeriseArr.push(seriesObj);

1
  • 답변 4

  • 도라도로떠납니다
    666
    2019-12-11 16:10:04
    var test_arr = [
            { data: 2, name: 'A', seq: 1 },
            { data: 1, name: 'A', seq: 2 },
            { data: null, name: 'A', seq: 3 },
            { data: 3, name: 'A', seq: 4 },
            { data: 5, name: 'A', seq: 5 },
            { data: 7, name: 'A', seq: 6 },
            { data: 9, name: 'A', seq: 7 },
            { data: null, name: 'B', seq: 1 },
            { data: 3, name: 'B', seq: 2 },
            { data: 2, name: 'B', seq: 3 },
            { data: 6, name: 'B', seq: 4 },
            { data: 1, name: 'B', seq: 5 },
            { data: 2, name: 'B', seq: 6 },
            { data: 8, name: 'B', seq: 7 }
          ];

      var group = [];
          test_arr.forEach(node => {
            const target = group.filter(n => node['name'] === n['name']);
            if(target.length > 0) {
              target[0]['data'].push(node['data']);
            } else {
              group.push({
                name: node['name'],
                data: [node['data']]
              })
            }
          });
  • 컴포지트
    1k
    2019-12-11 16:11:15 작성 2019-12-11 16:19:11 수정됨

    힌트를 주자면, JSON을 활용하여 중복을 막기 위해 PK로 쓸 값을 키로 지정한 뒤, 원하는 구조를 값으로 정의하면 됩니다. 그런 다음, 그렇게 수집한 "값"만 배열로 가져오면 되는 거죠. 아래는 돌아가긴 하지만, IE로 고려해야 한다면, 이 힌트로 리팩토링 해보시길.

    Object.values(list.reduce((map,row) => {
    	if(row.name in map)
      	map[row.name].data.push(row.data)
      else
      	map[row.name] = {name: row.name, data: [row.data]}
      return map;
    }, {}))
  • 빠바
    199
    2019-12-11 18:10:22

    두분 감사드립니다 확인해보겠습니다!

  • 빠바
    199
    2019-12-11 18:36:50

    감사드립니다.. 제가 짰던 코드에서 엄청나게 줄어들었네요. 알려주신 코드로 더 공부해보겠습니다

  • 로그인을 하시면 답변 을 등록할 수 있습니다.