html 태그에 있는 정보들를 한번에 받아와 리스트 만드는 방법!

제목 붙이기가 어렵네요...

<예제 html>

### html

<ul class="list_org revertEnabled">

<li class="template" data-external-key="#externalKey#" data-name="#name#" data-email="#email#" data-type-code="#typeCode#" data-master-key = "${userindex}">

<div class="_eddrViewWrap">

<div class="eddrWrap">

<span class="eddrView" title="#email#">#name#&nbsp;</span>

<a href="#" class="btn_del"><img src="${url.context}/images/swp/common/b.gif" width="8" height="8" alt="삭제"></a>

</div>

</div>

</li>

</ul>

위의 태그에서 name, email, typeCode, externalKey 의 값을 받아와 map으로 만들려고한다.

원래 하던 방법은 jQuery를 이용해 해당 값들을 받아온 후 map으로 만들어야한다.

하지만 값을 받아오는 동시에 map으로 return하는 방법이 있다!!

바로 [selector].map(function() {...}).get() 을 사용하면된다.

### js

//  필요한 정보만으로 리스트 만들기

var $inviteMember = $('.list_org');

var _memberList = $inviteMember.map(function() {

var $this = $(this);

return {

name: $this.data('name'),

email: $this.data('email'),

typeCode: $this.data('typeCode'),

externalKey: '' + $this.data('externalKey') // int -> string

};

}).get();

위와 같이 사용하면 한번에 필요한 정보를 리스트로 만들어 사용할 수 있다!

그럼 다들 불금!

저도 허접한거 하나 올려보겠습니다...

다들 충분히 하실거라 생각되지만!! 그래도 혜원님의 첫 포스팅 시작합니다.\

if/swith 문을 map 으로 리팩토링 하는 방법

간단한 ~~한 처리를 위해서 if문이나 switch문은 쉽고 간편하기 떄문에 많이 사용한다.

하지만 처리해야할 ~~가 많아진다면 if-else가 많아지고, case문이 많아져 코드의 가독성이 떨어질 것이다.

먼저 switch문으로 작성한 코드를 보자.

### js

function getStringMemberStatus(eventList) {

for(var i=0; i&lt;eventList.length; i++) {

var _eachEvent = eventList[i];

logger.log( "☆☆☆" + jsonUtils.toJSONString(_eachEvent));

var _memberCode = _eachEvent.member_status;

 

switch(_memberCode) {

  

case '500':

_eachEvent.xMember_status = '멤버';

break;

case '200':

_eachEvent.xMember_status = '초대';

break;

case '700':

_eachEvent.xMember_status = '운영자';

break;

default :

_eachEvent.xMember_status = '탈퇴';

break;

}

_eachEvent.xMember_status = memberCodeMap[_memberCode] || memberCodeDefaultValue;

var _memberName = _eachEvent.member_name;

   

logger.log( "***memberCode= " + _memberCode);

logger.log( "***memberName= " + _eachEvent.xMember_status);

   }

}

위 소스는 멤버 코드를 받아와 각 코드에 해당하는 String을 반환하는 함수이다.

여기서 멤버 코드가 추가 될 경우 case문을 계속해서 추가해야한다.

계속 코드가 길어지고.... case문이 많아지니까 맘에 들지 않아!

그러면 map으로 바꿔보면 어떨까?

### js

function getStringMemberStatus(eventList) {

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

            

             var _eachEvent = eventList[i];

      

            logger.log( "☆☆☆" + jsonUtils.toJSONString(_eachEvent));

             var _memberCode = _eachEvent.member_status;

            

             var memberCodeMap = {

                         '100': '가입' ,

                         '150': '가입' ,

                         '200': '초대' ,

                         '250': '초대' ,

                         '300': '탈퇴' ,

                         '350': '탈퇴' ,

                         '500': '멤버' ,

                         '700': '운영자'

            };

             var memberCodeDefaultValue = '되바라지다.' ;

            _eachEvent.xMember_status = memberCodeMap[_memberCode] || memberCodeDefaultValue;

             var _memberName = _eachEvent.member_name;

      

            logger.log( "***memberCode= " + _memberCode);

            logger.log( "***memberName= " + _eachEvent.xMember_status);

      }

}

코드가 훨신 더 간결해지고 읽기 편해짐이 느껴지는가??

여기서 멤버 코드가 추가되더라고 '키(key)-값(value)' 만 추가해주면 된다.

아주 간단하죠???????????

그럼 혜원님은 이만 뿅!