웹 개발을 하다 보면 JSON 형식의 문자열로 저장된 데이터를 실제 자바스크립트 객체로 변환해야 하는 경우가 자주 발생합니다. 이번 글에서는 JSON.parse() 메서드를 활용하여 문자열 배열을 객체 배열로 손쉽게 변환하는 방법을 예제와 함께 살펴보겠습니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,.sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
.result {
color: red;
}
</style>
</head>
<body>
<h1>Convert array of comma separated strings to array of object</h1>
<div class="sample"></div>
<br />
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click the above button to convert the above array of strings to objects</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
let arr = [
'{ "name":"Rohan", "age":12}',
'{ "name":"Mohit", "age":22}',
'{ "name":"Shawn", "age":18}',
'{ "name":"Michael", "age":19}',
];
sampleEle.innerHTML = arr;
BtnEle.addEventListener("click", () => {
arr.forEach((item, index) => {
arr[index] = JSON.parse(item);
});
arr.forEach((item) => {
resEle.innerHTML += "Name = " + item.name + " : Age = " + item.age + "<br>";
});
});
</script>
</body>
</html>코드 설명
위 코드의 동작 원리는 다음과 같습니다.
- 배열 arr에는 JSON 형식으로 작성된 네 개의 문자열이 담겨 있습니다.
- 버튼을 클릭하면 첫 번째 forEach() 루프가 배열의 각 요소를 순회하면서 JSON.parse()를 호출해 문자열을 객체로 변환하고, 그 결과를 같은 인덱스에 다시 할당합니다.
- 변환이 끝난 후 두 번째 forEach() 루프가 각 객체의 name(이름)과 age(나이) 속성 값을 화면에 출력합니다.
실행 결과
위 코드를 실행하면 아래와 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 다음과 같이 문자열이 객체로 변환되어 결과가 표시됩니다.
