ajax - json 이용하기, 부제 : Json파일 검색하기 (2022.10.21)

상이태상 2022. 10. 23. 03:03

1. 서론

이번 게시물은 시리즈이므로 이전 게시물을 보고와야 이해할 것이다. 이전 게시물은 요기!

2022.10.22 - [3층 - 개발의 장/ajax통신] - ajax - json 이용하기, 부제 : String자료형 ↔ Json자료형 (2022.10.21)

ajax - json 이용하기, 부제 : String자료형 ↔ Json자료형 (2022.10.21)

1. 서론 이전 게시물에서 간단하게 ajax통신에 대해서 알아보았다. XMLHttpRequest 객체로 인하여 페이지 전환(새로고침)이 일어나지 않고도 데이터와 데이터의 교환이 가능했고, @ResponseBody에 의하여

sukw9512.tistory.com

이번에는 전에도 언급했던 Json을 이용해 불러온 자료들을 검색하여 원하는 자료만 보는 것을 해볼 것이다.

테스트를 진행한 코드이다 보니 많이 복잡하게 나왔는데 결론 부분에서 모든 것을 뺀 코드를 올려두도록 하겠다.

2.본론

먼저 오늘의 주인공을 소개해보고자 한다.

오늘의 주인공은 'Gson' 이다.

Gson은 구글에서 만든 라이브러리로 java에 관한 내용을 json으로 변환시켜준다던가

json의 내용을 java로 변환시켜주는 등의 작업을 '알아서' 진행해 준다.

먼저 의존성부터 주입해주도록 하자.

1
2
3
4
5
6
<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.9.1</version>
        </dependency>
Colored by Color Scripter
cs

뭐...그 홈페이지에서 이제 검색해서 찾아오는 건 익숙할거고, pom.xml에 넣어주는것도 익숙할테니

생략하도록 하겠다. 필자는 위처럼 2.9.1버전을 가져왔다.

이제 코드를 살펴보자.

ex5.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex5</title>
<script type="text/javascript">
    var req
    function send() {
        req = new XMLHttpRequest();
        req.onreadystatechange = changeText
        req.open('post', "ex5")
        req.send(document.getElementById("title").value)
    }
    
    function changeText() {
        if(req.readyState == 4 && req.status == 200){
            var tbody = document.getElementById("tbody")
            //tbody.innerHTML = "아직은 데이터가 없음."
            //console.log(JSON.parse(req.responseText))
            var resData = JSON.parse(req.responseText)
            var printData = ''
            //cd를 지정하면 resData.cd만 지정하면 값을 얻어낼 수 있고(40),
            //resData.cd.length라 하면 값의 길이(0~39)를 얻어낼수 있다.
            for(i = 0; i < resData.cd.length; i++){
                
            printData += "<tr><td>"+resData.cd[i].title+"</td>"
            printData += "<td>"+resData.cd[i].artist+"</td>"
            printData += "<td>"+resData.cd[i].price+"</td></tr>"
            }
            tbody.innerHTML = printData
        }
    }
</script>
</head>
<body>
    <input type="text" id="title">
    <button type="button" onclick="send()">Search</button>
    <table border="1">
        <thead>
        <tr>
            <th>title</th>
            <th>artist</th>
            <th>price</th>
        </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>
</body>
</html>
Colored by Color Scripter
cs

ex5번은 4번과 크게 다른게 없다.

굳이 있다면 이제 text를 적어 Controller로 send시켜준다는 거?

AjaxController.java 中 ex5 부분.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
@GetMapping("ex5")
    public String ex5Get() {
        return "ajax/ex5";
    }
    
    @ResponseBody
    @PostMapping(value="ex5", produces = "application/json; charset=UTF-8")
//    스플릿으로 하여 배열로 배치하기엔 나는 너무 나약한 사람인가봐...    
//    required = false해주었을 경우 텍스트칸이 비어있다면 결과값이 null이 나온다.
    public String ex5Post(@RequestBody(required = false) String title) throws FileNotFoundException, IOException {
        ClassPathResource resource = new ClassPathResource("ex5.json");
        FileReader reader = new FileReader(resource.getFile());
        
        Gson gson = new Gson();
        JsonObject obj = gson.fromJson(reader, JsonObject.class);
        
//        System.out.println(data);
        System.out.println(obj.toString());
        System.out.println("title : " + title);
        if(title == null)
            return obj.toString();
        
        //obj.get("cd") : cd키의 값은 배열(Array)
        System.out.println("obj.get(\"cd\") : " + obj.get("cd"));
        JsonElement element = obj.get("cd");
        
        JsonArray array = element.getAsJsonArray();
        JsonElement element2 = array.get(0);
        
        // 행 단위 데이터는 { "title" : "Sylvias Mother", "artist" : "Dr.Hook", "price" : "8.10" } JSON 객체
        JsonObject obj2 = element2.getAsJsonObject();
//        getAsString() : 쌍따옴표를 제외한 문자열을 가져온다.
//        getString() : 쌍따옴표를 포함하여 문자열을 가져온다.
        System.out.println("obj2.get(\"title\").getAsString() : " + obj2.get("title").getAsString());
        System.out.println("obj2.get(\"title\").getAsString().equals(title) : " + obj2.get("title").getAsString().equals(title));
        
        /*
        {"cd" : [
        { "title" : "Sylvias Mother", "artist" : "Dr.Hook", "price" : "8.10" },
        { "title" : "Maggie May", "artist" : "Rod Stewart", "price" : "8.50" }
        ]}
        아래에서 지금 형식을 만들자.
         */
        String data = "{\"cd\" : [";
        boolean check = true;
        for(int i = 0; i < array.size(); i++) {
            JsonElement e = array.get(i);
            JsonObject o = e.getAsJsonObject();
            //getAsString() : 값에서 ""를 제외하고 데이터 추출
            if(o.get("title").getAsString().equals(title)) {
                check = false;
                // toString : 값에서 ""를 포함한 데이터 추출
                data += "{ \"title\" : " + o.get("title").toString();
                data += ", \"artist\" : "+ o.get("artist").toString();
                data += ", \"price\" :  " + o.get("price").toString() + "},";
            }
        }
        // 마지막 행 , 제거
        data = data.substring(0, data.length()-1);
        data += "]}";
//        System.out.println(data);
        
        if(check)
            return obj.toString();
        
        return data;
    }
Colored by Color Scripter
cs

필자가 생각하는 전체적인 흐름은 다음과 같다.

그렇다면 한번 실행시켜보자!!!

ex4번에 텍스트칸이 생겼다

Search를 클릭하면??

이와 같이 전체자료가 나오고??

텍스트칸에 'Eros' 라고 적어보자.

검색 결과도 정상적으로 나온다.

여담으로 같은 값이 5개가 나오는 이유는 40개의 자료를 만들려고

8개를 적다가 귀찮아서 복사 붙여넣기를 해서 그렇다!!! (당당)

3. 결론

검색까지 달려온 나를 위해 박수...(짝짝짝)

아직 완벽하게 이해한 것은 아니기 때문에 좀 더 흐름을 살펴보고 공부하도록 하고...

지금은 글씨 토씨하나 틀리지 않아야 검색이 되는데

일부검색이 되도록 해보는 과정을 한번 도전해보고자 한다.

그리고 확실히 필자는 서버랑은 그렇게 친한 사이가 아닌가봐.....

아 그리고 이건 AjaxController.java ex5번의 정리된 코드이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@ResponseBody
      @PostMapping( value="ex5", produces="application/json; charset=UTF-8") public
      String ex5Post(@RequestBody(required = false) String title) throws FileNotFoundException, IOException { 
        ClassPathResource resource = new
        ClassPathResource("ex5.json"); FileReader reader = new FileReader(resource.getFile());
      
        Gson gson = new Gson(); JsonObject obj = gson.fromJson(reader, JsonObject.class);
      
        if(title == null) 
          return obj.toString();
      
      JsonArray array = obj.get("cd").getAsJsonArray(); 
      String data = "{\"cd\" : ["; 
      
      for(int i = 0; i < array.size(); i++) { 
      JsonObject o = array.get(i).getAsJsonObject();
      if(o.get("title").getAsString().equals(title)) { 
          data += "{ \"title\" : " + o.get("title").toString(); 
          data += ", \"artist\" : "+ o.get("artist").toString(); 
          data += ", \"price\" :  " + o.get("price").toString() + "},"; 
          } 
      }
      
      data = data.substring(0, data.length()-1); data += "]}";
      
      return data; 
      }
Colored by Color Scripter
cs

저작자표시 (새창열림)