[Kendo ui] DropDownList에 Json 넣기 에러 해결

 

---

Problem

Kendo ui의 DropDownList에 DB에서 받아온 json 데이터를 넣으려는데 에러가 났다.

 

 

 

이렇게 생긴걸 Kendo ui 자바스크립트에 넣었는데...

 

var jikgub = $("#jikgub").kendoDropDownList({
                optionLabel: "Select jikgub...",
                height: 800,
                dataSource: {
                	type:"json",
                     transport: {
                         read: "http://localhost:8080/api/jikgub",
                         type: "GET",
                         dataType: "json",
                         contentType: "application/json; charset=utf-8"
                     }
                },
                dataTextField : "value",
                dataValueField : "value"
            });

 

 

 

 

 

오류가 계속 났다.

 

 

1) 그냥 api만 붙이면 글자가 한 character씩 잘려서 binding 되고,

2) dataTextField, dataValueField 속성을 지정하면 undefined가 떴다.

 

 

json으로 넘겨준건데 왜 안되냐... 한참을 고민했다.

 

 

 

 

---

Solution

 

api 통신의 Response를 찾아보니, Content-Type이 json이 아니라 'text/plain'으로 되어있었다.

 

 

 

 

service 단에서 DB에서 값을 받아올 때 return type을 List<String>으로 설정했었기 때문에....

 

controller단에서 직접 json 모양의 String을 만들어서(...) return 하게 했었는데 그러면 안됐던 것 같다. ㅠㅠ 

 

 

 

 

 

아래와 같이 API Back단의 코드를 수정하였다.

 

 

package com.example.demo.dto;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

@Builder
@NoArgsConstructor
@AllArgsConstructor
@Data
public class BaseDTO {
	

	private String key;
	private String value;
	
	
}

공통으로 사용할 기본 DTO 클래스를 새로 만들었다.

 

 

 

@GetMapping("/jikgub")
	public ResponseEntity<?> getJikgub(){
		
		//DB에서 jikgub 가져오기
		List<String> jikgubList = service.findJikgub();
		
		

		List<BaseDTO> jikgubJsonList = new ArrayList<BaseDTO>();

		//jikgub 값을 json에 넣기. key를 "jikgub"으로 고정 ==> {"key":"jikgub", "value":"어쩌구"}, ....
		for(String s : jikgubList) {
			jikgubJsonList.add(new BaseDTO("jikgub", s));
		}

		
		return ResponseEntity.ok().body(jikgubJsonList);
	}

Controller단에서, List<String>을 foreach로 감싸 List<BaseDTO>에 넣게 했다.

(dropdown에 사용할 값이라 양이 많지 않아서 for를 썼다.)

 

 

 ResponseEntity의 Body에 String이 아닌 List를 넣는게 중요했다.

 

 

 

 

사진과 같이 API response의 Content-Type이 text/plain 대신 application/json으로 잘 나왔다.

 

 

 

 

 

실행 결과

css가 깨지고 있긴 한데.. 아무튼 값은 의도한대로 잘 나왔다...

 

끝..