api연습 중 ajax값 undefined발생 .. (문자열 json보낼 시 parse두번)// JSON.parse한 값 undefined

예전에 공공데이터 api 할때는 

 

자바에서 json데이터 쏴주고 아래처럼 했었다(서블릿 사용 시)

---

근데 스프링에서 하니까 왠진 몰겠는데

 

let datas = JSON.parse(this.responseText); 가 아래 값인데

 

console.log("item:", datas.gyeongnamculturallist.body.items.item); 이게 아래처럼 나온다

 

---

-이 문자열은 실제 JSON 객체 {"key":"value"}가 이스케이프된 형태

이렇게 이중 이스케이프된 JSON 문자열을 JSON.parse로 파싱하려면 두 번의 파싱이 필요하다고 한다

한 번만 파싱한 JSON문자열은 typeof를 찍어보면 string으로 나오기 때문에..속성을 못찾는다고 함..

 

아래가 자바에서 보낸 문자열 json데이터

---

 

실제로 값이 string으로 나왔음

---

 

 

 

1. 첫 번째 JSON.parse는 이스케이프된 JSON 문자열을 일반 문자열로 변환해준다
2. 두 번째 JSON.parse는 파싱한 문자열을 실제 JSON 객체로 변환해주기

따라서 JSON.parse(JSON.parse(this.responseText))를 해야함(두번파싱)

 

참고페이지

 

https://dev-doodoo.tistory.com/entry/JSONparse%ED%95%9C-Object-%EB%82%B4-%ED%94%84%EB%A1%9C%ED%8D%BC%ED%8B%B0%EA%B0%80-undefined%EB%A1%9C-%EB%82%98%EC%98%A4%EB%8A%94-%EA%B2%BD%EC%9A%B0

---

근데 문자열을 json으로 보내서 이스케이프 처리해서 그런듯하다.. 왠진모르겠는데

 

자바객체에 담아서 보내니까 파싱 한번만 해도 괜춘함