[JS][JQuery] 배열 데이터를 select 요소에 넣기

변수 설명

아래, 배열 변수 3개가 있다.

main_catgy_arr에는 대분류 데이터가, 

middle_catgy_arr에는 중분류 데이터가,

sub_catgy_arr에는 소분류 데이터가 저장되어 있다.

 

중분류 배열에 저장된 객체는 각각 code, name, code_ref_mn 이라는 이름으로 3개의 값이 저장되어 있다..

code에는 해당 중분류 데이터의 코드가,

name에는 해당 중분류 데이터의 코드명이,

code_ref_mn에는 해당 중분류 데이터의 대분류 코드가 저장되어 있다.

 

소분류 배열에 저장된 객체는 각각 code, name, code_ref_md, code_ref_mn 이라는 이름으로 4개의 값이 저장되어 있다.

code_ref_md에는 해당 소분류 데이터의 중분류 코드가 저장되어 있다.

 

subCatgyObj 변수는 Object형이다.

이 변수에는 또 다시 2개의 객체가 저장되어 있는데,

code에는 소분류 코드가,

name에는 소분류 코드명이,

code_ref_md에는 해당 소분류 코드의 중분류 코드가,

code_ref_md_name에는 code_ref_md에 따른 중분류 코드명이,

code_ref_mn에는 해당 중분류 코드의 대분류 코드가,

code_ref_mn_name에는 code_ref_mn에 따른 대분류 코드명이 저장되어 있다.

 

 

코드 목표

♠ .wrapper 요소 개수만큼 subCatgyObj에 저장된 객체를 .wrapper_div 요소의 <select> 값으로 설정한다.

 

 

See the Pen Untitled by 심예지 (@qalgscoa-the-bashful) on CodePen.

 

 

---

 

♠ 추가 설명 ♠

1. map()

1-1. 정의 및 구문

배열의 각 요소에 대해 주어진 함수 호출한 결과를 새로운 배열로 리턴하는 배열 메서드

 

array.map(function(currentValue, [index], [array]) {
  // 함수 실행 코드
}, [thisArg]);

 

• currentValue : 현재 처리 중인 배열 요소의 값
• [index] : 현재 처리 중인 배열 요소의 인덱스
• [array] : map() 메서드가 호출된 배열 자체
• [thisArg] : 콜백 함수 내에서 this로 사용되는 값  

 

1-2. 코드 설명

let sub_ref_mn_name_arr = Object.values(subCatgyObj).map(value => value.code_ref_md_name);

 

subCatgyObj 객체의 값들을 배열로 변환(Object.values())한 후, map() 메서드를 사용해 각 요소의 code_ref_md_name 속성 값만 추출하여 결과를 변수 sub_ref_mn_name_arr 배열에 할당한다.

 

2. filter()

2-1. 정의 및 구문

주어진 함수의 조건을 만족하는(true) 요소들로 이루어진 새로운 배열을 리턴하는 메서드

조건에 만족하지 않는 요소는 필터링되어 새로운 배열에 포함되지 않는다.

 

array.filter(function(element, [index], [array]) {
  // 조건을 확인하는 코드
}, [thisArg]);

 

• element: 현재 처리 중인 배열 요소의 값
• [index] : 현재 처리 중인 배열 요소의 인덱스
• [array] : filter() 메서드가 호출된 배열 자체
• [thisArg] : 콜백 함수 내에서 this로 사용되는 값  

 

2-2. 코드 설명

$(sub_main_select).find("option").filter(function() {
	return sub_ref_mn_name_arr[index].includes($(this).text());
}).attr("selected", "selected");

 

1. filter() 메서드로 sub_main_select의 각 <option> 요소들을 필터링해 조건을 만족하는 요소들로 이루어진 새로운 jQuery 객체를 리턴한다.
2. 조건 : sub_ref_mn_name_arr[index]의 값이 <option> 요소의 텍스트에 포함되어 있다.
3. 조건을 만족하는 요소가 있다면 해당 <option> 요소에 속성 "selected=selected"를 추가한다.

 

3. includes()

3-1. 정의 및 구문

배열의 요소를 순회하며 주어진 값을 포함하고 있는지 여부를 확인하여 true / false를 리턴하는 메서드