JavaScript 에서 JSON Parse

JavaScript & HTML

by husks 2014. 3. 26. 13:34

JavaScript에서 json을 Parse하는 방식입니다.

* JavaScript 에서 JSON 생성 하시려는 분은 여기 참고 => http://huskdoll.tistory.com/11

* JAVA 에서 JSON 생성 하시려는 분은 여기 참고 => http://huskdoll.tistory.com/38

* JAVA에서 JSONParser 사용 하시려는 분은 여기 참고 => http://huskdoll.tistory.com/6

JavaScript에서 JSON형식을 받은 경우 해당 데이터를 JavaScript 객체로 변경하여 데이터를 추출하는 방식입니다.

아래 소스를 실행해 보시기 바랍니다. (console.log 는 브라우저에서 개발자 모드의 console창에서 확인 가능 합니다. )

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
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  <head>
    <title>Home</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
    
    $(function() {
        
        $("#checkJson").click(function() {
            
        var jsonStr = "{\"persons\":[{\"name\":\"송강호\",\"age\":\"25\",\"gender\":\"남자\",\"nickname\":\"남궁민수\"},{\"name\":\"전지현\",\"age\":\"21\",\"gender\":\"여자\",\"nickname\":\"예니콜\"}],\"books\":[{\"name\":\"사람은 무엇으로 사는가?\",\"writer\":\"톨스토이\",\"price\":\"100\",\"genre\":\"소설\",\"publisher\":\"톨스토이 출판사\"},{\"name\":\"홍길동전\",\"writer\":\"허균\",\"price\":\"300\",\"genre\":\"소설\",\"publisher\":\"허균 출판사\"},{\"name\":\"레미제라블\",\"writer\":\"빅토르 위고\",\"price\":\"900\",\"genre\":\"소설\",\"publisher\":\"빅토르 위고 출판사\"}]}";
            
        var jsonInfo = JSON.parse(jsonStr);
            
        for(var i in jsonInfo.persons) {
          console.log("========== person ==============");
          console.log("person_name: "+jsonInfo.persons[i].name);
          console.log("person_age: "+jsonInfo.persons[i].age);
          console.log("person_gender: "+jsonInfo.persons[i].gender);
          console.log("person_nickname: "+jsonInfo.persons[i].nickname);
        }
            
        console.log("");
        
        for(var i in jsonInfo.books) {
          console.log("========== book ==============");
          console.log("book_name: "+jsonInfo.books[i].name);
          console.log("book_writer: "+jsonInfo.books[i].writer);
          console.log("book_price: "+jsonInfo.books[i].price);
          console.log("book_genre: "+jsonInfo.books[i].genre);
          console.log("book_publisher: "+jsonInfo.books[i].publisher);
        }
      });
    });
       
    </script>
  </head>
  <body>
    <br>
    <br>
    <a id="checkJson" style="cursor:pointer">확인</a>
  </body>
</html>

'JavaScript & HTML' 카테고리의 다른 글

jQuery 버튼값 가져오기 (0)	2014.04.17
브라우저별 이미지 크기 변경 (0)	2014.04.10
jQuery 탭(tab) 메뉴 모음 (0)	2014.04.08
Drag&Drop 연결선 (jsPlumb) (0)	2014.03.11
JavaScript 에서 JSON 생성 (0)	2014.03.07