json 데이터를 동적으로 html 만들어 삽입하기 / dynamically create html elements with json data

디비에서 받아온 카테고리나 그룹과 같은 리스트 정보를 이용해 select 엘러먼트의 option 을 추가해주어야 하는 경우가 종종 있다.

Controller 에서 Model 을 거쳐 가져온 DB query의 result rows 는 다시 Controller 에서 json_encode() 함수를 이용해 jSON 데이터로 변환해서 View 로 넘겨준다.

[{“category_no”:”4″,”no”:”2″,”category_code”:”greenparking”,”category_name”:”Green Parking”,”category_order”:”0″},{“category_no”:”5″,”no”:”2″,”category_code”:”privategarden”,”category_name”:”Private Garden”,”category_order”:”1″},{“category_no”:”6″,”no”:”2″,”category_code”:”aquagarden”,”category_name”:”Aqua Garden”,”category_order”:”2″}]

cList 자바스크립트 변수는 서버측에서 넘겨준 위와같은 jSON 데이터를 담았다고 가정하고 아래와 같이 루프를 돌려 option 엘러먼트를 만들어 낸다.

categorySelectEl = '';
for (var i = 0; i < cList.length; i++) {
    categorySelectEl += '<option value="' + cList[i]['category_code'] + '">' + cList[i]['category_name'] + '</option>';
}


jQuery append() 메서드를 이용해 어펜트 시킬 엘러먼트를 지정 후 option 목록을 붙이면 된다.

$("#slide_item").append(categorySelectEl);

[참조] 크게 비슷하진 않지만…

https://www.encodedna.com/javascript/populate-select-dropdown-list-with-json-data-using-javascript.htm