본문 바로가기

Front-end/JavaScript

JSON을 JavaScript 배열의 형태로 변환하기: 데이터 형식의 변환

JSON을 JavaScript 배열의 형태로 변환하기: 🌐 데이터 형식의 변환 🔄

JSON과 JavaScript 배열: 💡 데이터 형식의 이해

JSON(JavaScript Object Notation)은 데이터를 효과적으로 표현하고 전송하기 위한 경량의 데이터 형식입니다. JSON을 JavaScript 배열의 형태로 변환하는 방법을 알아보겠습니다! 😄

JSON을 JavaScript 배열로 변환하는 방법: 🔄

JSON 문자열을 JavaScript 배열로 변환하려면 JSON.parse() 메서드를 사용합니다. 이를 코드 예제를 통해 자세히 알아보겠습니다. 👀


const jsonStr = '[{"name":"John","age":30,"city":"New York"},{"name":"Jane","age":25,"city":"London"}]';

const jsonArray = JSON.parse(jsonStr);
console.log(jsonArray);

위 코드 예제에서는 JSON 형식의 문자열을 JSON.parse() 메서드를 사용하여 JavaScript 배열로 변환하였습니다. 변환된 배열은 다양한 작업에 활용할 수 있습니다! 💪

JSON을 JavaScript 배열로 변환하는 실습 예제: 💻

이제 실제로 JSON을 JavaScript 배열로 변환하는 실습 예제를 살펴보겠습니다. 다음은 JSON 데이터가 포함된 외부 파일을 불러와 배열로 변환하는 예제입니다. 🚀


// 데이터가 포함된 jsondata.json 파일 불러오기
fetch('jsondata.json')
  .then(response => response.json())
  .then(data => {
    // JSON을 JavaScript 배열로 변환
    const jsonArray = Array.from(data);

    // 변환된 배열 활용
    console.log(jsonArray);
  });

위 예제에서는 fetch() 메서드를 사용하여 외부 JSON 파일을 불러온 후, .json() 메서드를 이용하여 JSON 데이터를 JavaScript 객체로 변환합니다. 이후 Array.from() 메서드를 사용하여 객체를 배열로 변환합니다. 변환된 배열은 다양한 작업에 활용할 수 있습니다! 🔍

더 많은 정보와 예제를 확인하려면 MDN JavaScript JSON 가이드를 참고해주세요. 📖

이로써 JSON을 JavaScript 배열의 형태로 변환하는 방법을 알아보았습니다. 실습 예제를 통해 개념을 익혀보세요! 🎉

궁금한 점이나 글에 오류가 있다면 댓글로 남겨주시면 성심껏 답변해드리겠습니다. 📝

🎉🎉🎉