서버 실행없이 HTML에서 JSON파일 읽기 (+ Controller에서 Json파일 읽어서 보내기)

원래는 서버에서 JSON 파일을 읽어 Model객체로 전달해주는 로직이었다.

 

[ 컨트롤러에서 JSON 파일 읽기 ]

- 여기서는 webapp 하위 경로에 넣었다. (아래 코드)
- Resources 하위에 넣어놓았다면 아래와 같이하면 된다.
    - java.net.URL과 java.lang.ClassLoader 이용
    - URL systemResource = ClassLoader.getSystemResource("CertPdfDemoFile.pdf");

 

// gson, HttpServletRequest 을 이용

JsonParser parser = new JsonParser();

String jsonFilePath =  request.getSession().getServletContext().getRealPath("/json/data.json");

             

Object obj = parser.parse(new FileReader(jsonFilePath));

JsonObject jsonObject =(JsonObject) obj;

System.out.println("============"+jsonObject.toString());

 

 

 

[ .jsp에서 받는 부분 ]

var data = '${JsonData}';

var parseData = JSON.parse(data);

 

…(생략)

 

 

하지만 JSP가 아닌 HTML 확장자로

해당 파일을 단독으로 실행하여 JSON 데이터를 처리하라는 요청이 들어왔다.

 

그때부터 제이쿼리의

$.getJSON , xmlHttpRequest 등 스크립트 소스를 구글링하여 해봤지만

 

브라우저마다 xmlHttpRequest를 이용 여부도 불분명 한 것 같았고

$.getJSON의 경우는 서버 기동과 함께 사용하는 것 같아 다른 방법을 찾아보고 있었다.

 

 

그때 찾은 방법은 다음과 같다

 

---

 

1. 스크립트 태그<script> 사용
    - 아래와 같이 <script> 태그를 이용하면 스크립트로 실행시켜주는 것 같다.(불확실)
    - JSON파일을 조금 수정해야한다. 

 

<!-- 서버실행없이 외부제이슨 파일 읽기 위해 -->

<script type="text/javascript" src=“./data.json"></script>

 

2. JSON 파일 수정하기
    - 작성자의 경우, 자바스크립트를 통해 JSON 데이터를 파싱하여 append를 시킬 것이므로
    - JSON.parse의 파라미터 값으로 JSON파일을 읽은 데이터를 넘길 예정

    - 따라서 <script> 를 이용하여 JSON을 읽고, 읽은 데이터를 담을 변수가 필요.
    - 이를 JSON 파일에서 설정할 예정이다.

 

[ 일반적인 JSON 데이터 구성 ]

{ 

  "title” : “제목",

  “name" : “독자1",

  “price" : “1,000원"

}

 

[ 수정한 JSON 데이터 구성 ]

// 이때 Params는 호출하는 페이지에서 사용할 변수이름이다.
// 이렇게 수정하고 이클립스에 추가하면 JSON형식 오류로 빨간줄이 뜨지만 무시해도..실행은 가능하다..

Params = { 

              "title” : “제목",

              “name" : “독자1",

              “price" : “1,000원"

         }

 

3. 자바스크립트에서 JSON.parse 이용하기
    - 2번까지 했다면 다 되었다. 스크립트태그에서 JSON.parse 를 호출하면 된다.
    - 하지만 그냥 var parseData = JSON.parse(Params); 를 한다면 콘솔창에 다음과 같은 에러가 찍힐 것이다.

        - caught SyntaxError: Unexpected token o in JSON

        - JSON.parse의 인자값은 String 이어야 한다. 하지만 Params의 경우 JavaScript Object이기 때문에
          문자열로 바꿔줘야한다.
        - 따라서 다음과 같이 JSON.stringify를 이용하여 한번 더 감싸주면 된다.

        - https://stackoverflow.com/questions/38380462/syntaxerror-unexpected-token-o-in-json-at-position-1

 

var parseData = JSON.parse(JSON.stringify(Params));

 

4. 주의 사항
    - 다만 이렇게 하는 경우, 조심해야하는 게 있다.
    - 만약 개행처리를 하고 싶은 경우, 일반적으로 서버단에서 넘어온 데이터를 JSON.parse로 파싱하면

      줄바꿈(\n)이 되어있다.

    - 이를 <br/> 태그로 replace하는 경우 정규식이 .replace(/\n/g, '<br/>’) 이런식이 된다.

    - 하지만 위와 같은 방식으로 JSON 데이터를 읽어온 경우 문자열로 취급이 되어 “\n”이 되버린다.

    - 따라서 .replace(/\\n/g, '<br/>’) 이렇게해주면 원하는 줄바꿈이 된다.

    - 그리고 올바른 제이슨 형태가 아니기 때문에 (ex. 변수 = {} ) 개발자도구에서
      주의 메시지(노란색으로..)를 보게될 수도 있다

 

 

이렇게하면 별도의 서버 기동 없이, JSON 파일을 읽어서 처리할 수 있다. (뭐예요.. 4시간 돌려줘요…ㅠㅠ)