프로그래밍/JavaScipt

javascript lodash사용하여 객체합치기(merge)

p-a-r-k 2018. 2. 9. 13:47
반응형

1. w2ui grid에서 editable 사용하여 일괄수정 개발 필요하다..


- 수정 전 그리드


- 수정 후 그리드


w2ui grid에서는 edit필드에 변화가생기면 셀 오른쪽상단에 빨간표시가 생긴다. (우리가게 > 우리가게2로 수정한걸 기억 ㄱㄱ.)

이후 변화된값을 가져오기위하여 getChanges() 메소드를 사용하면..

 w2ui['grid'].getChanges();

변화 된 셀의 정보만 가져와서 수정처리를 해주기 곤란하지않나..

(모든셀의정보를 넘겨 수정프로시저를 태워서 변화되지않은 나머지 셀의 정보도 필요)


다행히 getChange()메소드를 통해 얻은 row키값을 알고있어서 

아래와 같이 조지면 일단 row전체정보수정된정보 를 얻을 수 있다.

var getchanges = w2ui['grid'].getChanges();
var newchanges = [];

$(getchanges).each(function(i){
   //키값을 이용한 row전체 셀 가져오기
   console.log(w2ui['grid'].get(this.recid));

   //변화 된 셀값만 가져오기
   console.log(this);
})


아래 콘솔에서 보이듯이 row전체정보를 가져올 때 수정 된 값이 반영이 안되므로 두개의 객체를 합쳐줘야함.



그래서 lodash라는걸 처음써봄. jquery같은 자바스크립트 라이브러리로..

배열에 관련해서 메소드를 제공해줘서 짧은 코드로 쉽..게 구현시켜주는거 같음 ㅋ


안써도 할수있는거같긴한데 복잡해서 그냥 lodash썼음. https://code.i-harness.com/ko/q/182cf2


그래서 아래코드로 다시 조지면..

var getchanges = w2ui['grid'].getChanges();
var newchanges = [];//두개객체를 합친 객체를 담을 공간

$(getchanges).each(function(i){
   //lodash의 mergeWith메소드사용
   newchanges.push(_.mergeWith(w2ui['grid'].get(this.recid), this, customizer));
}).promise().then(function(){
   console.log(newchanges);
});

function customizer(objValue, srcValue) {
 if (_.isArray(objValue)) {
    return objValue.concat(srcValue);
 }
}

콘솔을 보면 객체가 합쳐진것을 볼수있고 "w2ui"라는 값에 변화 된 정보도 들어가서 저부분은 로그로저장함 ㅋ.

반응형