[JS] indexOf, split, map, reduce를 활용한 데이터 응용

 

 

1.문제점

 

프로젝트 관련 작업중 엑셀파일안에 있는 데이터를 재가공 해야하는 경우가 있어, 
자료구조 데이터를  원하는 형식에 맞춰 값을 만드는 능력을 기르기 위해 다음과 같이 메모를 시작한다.

 

위와같이 3줄의 스트링형식으로 텍스트를 받았을때, 첫줄은 컬럼 키값, 그밑에 줄은 밸류값으로 만들어,

map함수로 object 형식으로 만들어 값을 리덕스에 저장하기 위함을 목표로 진행

 

 

 

2.데이터 자르기 ( indexOf + slice 활용)

가장먼저 키값과 밸류값을 나누기 위해 첫줄과 그밑에줄을 분기를 시켜줬다. 

slice 메서드는 정확한 number값을 넣어줘야 작동이 되기 때문에 indexOf 메서드를 활용한다.

const csvHeader = string.slice(0, string.indexOf('\n')).split(',');
const csvRows = string.slice(string.indexOf('\n') + 1).split('\n');

 

2-1.미리보기

다음과 같이 7번줄에 키값 10번줄에 밸류값을 활용할수있는 배열을 만들수있다. 

 

3. 데이터가공 ( map + slice활용 )

const Data = rowData.map((i) => {
  const values = i.split(",");
  const obj = headerData.reduce((object, header, index) => {
    object[header] = values[index];
    return object;
  }, {});
  return obj;
});

 

4.결과도출

const values 를통해서 map안에 rowData를 나눠주고, 

 

 

 

 

const obj = headerData.reduce((object, header, index) => {
    object[header] = values[index];
    return object;
  }, {});

headerData가 키값이기 때문에 이녀석을 reduce를 활용하여, 객체로 i 의 갯수만큼 저장하려한다. 

키값에는 

 

위처럼 데이터가 object 형식으로 잘나온것을 확인할수있다. 

 

이제 위에값을 잘만들었으니, 잘뿌려주거나, dispatch에 액션에 보내주면완성

 

5.참고 이미지

MDN reduce