ㅤㅤㅤ

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

プログラミング/JavaScript JQuery

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

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ 2017. 6. 27. 11:00

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 JQuery' 카테고리의 다른 글

JavaScript에서 json을 생성 하는 방식입니다.  (0) 2017.06.27
JSON 튜토리얼  (0) 2017.06.27
JSON 은 무엇인가? 개요 알아보기  (0) 2017.06.23
자바스크립트 셀렉트박스 날짜 선택!  (0) 2017.06.23
JQuery를 이용한 달력 datepicker  (1) 2017.06.22
공유하기 링크
'プログラミング/JavaScript JQuery' Related Articles more
Comments