[Javasript/Jquery] Json데이터 파싱 사용법 정리(Json 파싱)

2020. 10. 10. 09:56·노빠꾸 개발일지/JQUERY & JAVASCRIPT
목차
  1. 1. Json데이터 파싱
반응형


 

이번 피드에서는 Json데이터에 대해 알아보겠습니다.

 

우선 간단히 Json데이터가 무엇인지 살펴보겠습니다.

 

Json데이터는 key-value 쌍으로 이루어진 데이터입니다.

 

Json데이터의 기본 포멧은 아래와 같습니다.

1
2
3
4
5
 {
     "name": "Kim",
     "age": 25,
     "address": "Seoul"
  }
cs

살펴보면 데이터가 {} 괄호로 쌓여있고,

 

데이터는 "key 값" : "value 값" 이런식으로 표현되게 됩니다.

 

Json데이터는 대표적으로 Ajax서버통신에 많이 사용되기 때문에, 자주 사용하게되는 데이터입니다.

 

이제 본격적으로 사용방법에 대해 알아보겠습니다.

 

1. Json데이터 파싱

 

Json데이터를 파싱에 관련된 함수는 2가지가 있습니다.

 

각각, 데이터를 Json데이터로 파싱해주는함수와, Json데이터를 Key-value형태의 값으로 파싱해주는 함수입니다.

 

한개씩 알아보도록 하겠습니다.

 

1. Json데이터로 파싱해주는 함수 - JSON.stringify()

1
2
3
4
5
 6
7
    var obj = new Object();
    obj.name = "kim";
    obj.address = "seoul";    

    var jsonData = JSON.stringify(obj);

    console.log(jsonData); // jsonData : {"name":"kim","address":seoul"}
cs

위의 코드는 데이터를 생성하고, Json데이터로 파싱해주는 코드입니다.

 

 

2. Json데이터를 파싱하여, Key-value 형태의 값으로 변환해주는 함수 - JSON.parse()

1
2
3
4
5
6
7
8
9
10
11
12
// Json 데이터 생성
    var obj = new Object();
    obj.name = "kim";
    obj.address = "seoul";    
    var jsonData = JSON.stringify(obj);
        
    var obj = JSON.parse(jsonData); // Json데이터 -> Key,Value형태의 데이터로 파싱
    
    console.log(obj); // obj : {name: "kim", address: "seoul"}
    console.log(obj.name); // obj.name : kim
    console.log(obj.address); // obj.address : seoul
cs

위의 코드는 Json데이터를 Key-value형태의 값으로 변환해주는 코드입니다.

 

Json데이터 생성과정(1 ~ 5 Line)은 위의 1번과정의 코드를 그대로 사용했습니다.

 

이제 두 함수를 사용하면 Json데이터를 만들수도 있고,

 

Json데이터를 key-value데이터로 파싱하여 사용할수도 있습니다.

 


 

이번 피드에서는 간단한 Json데이터 사용법에 대하여 알아보았습니다.

 

이번피드는 여기서 마치겠습니다.

반응형
저작자표시 비영리 변경금지 (새창열림)

'노빠꾸 개발일지 > JQUERY & JAVASCRIPT' 카테고리의 다른 글

[Javascript/Jquery] 라디오버튼(radio button) 사용법 정리 (라디오버튼 선택/ 라디오버튼 해제/ 라디오버튼 선택값 가져  (2) 2020.10.12
[Javascript/Jquery] Ajax 사용법 정리(Ajax란?, Ajax 기본 형태, Ajax Option 정리, Ajax Get, Ajax Post)  (0) 2020.10.11
[Javascript/Jquery] 배열(Array) 기본 사용법 정리(배열 초기화, 배열 0으로 초기화, 배열 특정값 초기화, 배열 값 입력, 배열 값 삭제)  (2) 2020.10.09
[Javascript] 자바스크립트 날짜(Date) 함수 정리  (2) 2020.10.07
[js/css] js파일, css파일, img파일 사용시 캐시 방지 팁  (1) 2020.10.05
  1. 1. Json데이터 파싱
'노빠꾸 개발일지/JQUERY & JAVASCRIPT' 카테고리의 다른 글
  • [Javascript/Jquery] 라디오버튼(radio button) 사용법 정리 (라디오버튼 선택/ 라디오버튼 해제/ 라디오버튼 선택값 가져
  • [Javascript/Jquery] Ajax 사용법 정리(Ajax란?, Ajax 기본 형태, Ajax Option 정리, Ajax Get, Ajax Post)
  • [Javascript/Jquery] 배열(Array) 기본 사용법 정리(배열 초기화, 배열 0으로 초기화, 배열 특정값 초기화, 배열 값 입력, 배열 값 삭제)
  • [Javascript] 자바스크립트 날짜(Date) 함수 정리
No Backing
No Backing
노빠꾸
    300x250
  • No Backing
    누릇한 노빠꾸 블로그
    No Backing
  • 전체
    오늘
    어제
    • 분류 전체보기 (144)
      • 노빠꾸 서버 (20)
        • AWS (0)
        • 설치관련 (7)
        • 명령어 정리 (2)
        • 서버 설정 (8)
        • Nginx (2)
      • 노빠꾸 개발일지 (70)
        • JAVA (16)
        • JQUERY & JAVASCRIPT (10)
        • HTML5 (0)
        • SPRING (16)
        • Design Patterns (1)
        • DAUM API (1)
        • GIT (10)
        • Python (1)
        • SPRING SECURITY (1)
        • Vue (3)
      • 노빠꾸 데이터베이스 (9)
        • SQL (1)
        • ORACLE (3)
        • MySql (5)
      • 노빠꾸 일상 (13)
      • 노빠꾸 책 추천 (4)
      • 노빠꾸 경제 (20)
      • 노빠꾸 맥북 사용기 (7)
      • 노빠꾸 정보처리기사 정리 (1)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    JPA 쿼리 메소드
    MySQL 데이터베이스 생성
    WebSecurityConfigurerAdapter Deprecated
    websecurityconfigureradapter 사용법
    리눅스 자바 설치
    리노드
    경제용어
    티스토리 사이트맵 등록
    스프링부트 JPA
    주식용어
    깃허브 코파일럿
    맥북 사용 팁
    스프링부트 프로젝트
    스프링부트
    MySQL 사용자 계정 생성
    websecurityconfigureradapter란
    사이트맵
    우분투 자바 설치
    websecurityconfigureradapter 빈 등록
    맥북 단축키
    스프링 시큐리티 5.7 버전이후 변경사항
    개인서버 추천
    Linode
    금융용어
    인텔리제이
    websecurityconfigureradapter 변경사항
    Spring boot
    스프링시큐리티 websecurityconfigureradapter
    WebSecurityConfigurerAdapter
    스프링부트란
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
No Backing
[Javasript/Jquery] Json데이터 파싱 사용법 정리(Json 파싱)
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.