반응형
안녕하세요. 경제적, 시간적 자유를 꿈꾸는 한량입니다.
jQuery의 .parseJSON() 사용법
parseJSON() 함수는 jQuery에서 제공하는 유틸리티 함수 중 하나로,
JSON 문자열을 파싱하여 JavaScript 객체로 변환합니다.
JSON(JavaScript Object Notation)은 데이터를
효율적으로 표현하기 위한 경량의 데이터 형식으로
JavaScript의 객체 표기법과 매우 유사합니다.
따라서 JSON 데이터를 JavaScript에서 사용하기
위해서는 이를 파싱하여 JavaScript 객체로 변환해야 합니다.
서버로부터 받은 JSON 형식의 데이터를 파싱하여 JavaScript 객체로 변환하고,
해당 객체의 속성에 접근하여 데이터를 활용하여
해당 정보를 화면에 출력하는 등의 작업을 수행할 수 있습니다.
간단한 예제로 버튼을 클릭 시 parseJSON() 함수가 어떻게 작동하는지 알아봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>parseJSON() 함수 예제</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#parseJSONButton').click(function(){
// JSON 문자열
var jsonString = '{"name": "John", "age": 30, "city": "New York"}';
// JSON 문자열을 JavaScript 객체로 변환
var jsonObject = $.parseJSON(jsonString);
// 변환된 객체의 데이터 활용
var name = jsonObject.name;
var age = jsonObject.age;
var city = jsonObject.city;
// 화면에 데이터 출력
$('#output').html('이름: ' + name + '<br>나이: ' + age + '<br>도시: ' + city);
});
});
</script>
</head>
<body>
<div id="output">
{"name": "John", "age": 30, "city": "New York"}
<br />
문자열 파싱 예제
</div>
<button id="parseJSONButton">문자열 파싱하기</button>
</body>
</html>이 예제 코드에서는 parseJSON() 함수를 사용하여
JSON 문자열을 파싱하여 jsonObject라는 JavaScript 객체로 변환하고,
해당 각 객체의 데이터를 변수에 저장합니다.
그리고 화면에 변환된 객체의 데이터를 .html() 함수를 사용하여
출력하는 것을 확인할 수 있습니다.
반응형
'IT 소스 > jQuery' 카테고리의 다른 글
| [jQuery] .first() - 첫 번째 요소 선택하기 (0) | 2024.03.07 |
|---|---|
| [jQuery] .parseXML() - XML 데이터를 JavaScript 객체로 변환 (0) | 2024.03.01 |
| [jQuery] .parent() - 부모 요소를 선택 (0) | 2024.02.27 |
| [jQuery] .clone() - 요소를 복제 (0) | 2024.02.22 |
| [jQuery] .length - 선택한 요소의 개수를 반환 (0) | 2023.03.07 |