JavaScript에서 형식화되고 읽기 쉬운 JSON 생성

Muhammad Muzammil Hussain 2023년6월20일
  1. JavaScript에서 형식화되고 읽기 쉬운 JSON 생성
  2. parse() 메서드를 사용하여 형식화되고 읽기 쉬운 JSON 생성
  3. stringify() 메서드를 사용하여 형식화되고 읽기 쉬운 JSON 생성
JavaScript에서 형식화되고 읽기 쉬운 JSON 생성

JSON은 JavaScript Object Notation의 약자입니다. 구조화된 데이터를 나타내는 JavaScript 구문을 기반으로 하는 표준 텍스트 기반 형식입니다. 일반적으로 JSON은 서버와 서버에서 클라이언트로 데이터 클라이언트를 보내는 것과 같이 웹 애플리케이션에서 데이터를 전송합니다.

JSON에서는 아래와 같이 키-값 쌍으로 데이터를 저장합니다.

JSON 구조:

{

 "StringData": "name",
 "IntData": 10,
 "booleanData": true,
 "arrayData":[]

}

JavaScript에서 형식화되고 읽기 쉬운 JSON 생성

데이터를 보다 읽기 쉬운 형식으로 변환하기 위해 변환을 위한 JavaScript의 기본 메서드가 있습니다. 웹 개발에서 데이터를 서버로 전송할 때 또는 서버에서 레코드를 가져와야 하는 경우 일반적인 문제에 직면합니다. 대부분 서버의 원시 JSON 문자열이 있습니다.

직접 자바스크립트 객체로 변환해야 합니다. 그리고 데이터를 서버로 보내려면 주로 JSON 문자열로 변환해야 합니다.

JavaScript에는 두 가지 변환 유형을 모두 달성하기 위한 parse()stringify()라는 두 가지 메서드가 있습니다.

parse() 메서드를 사용하여 형식화되고 읽기 쉬운 JSON 생성

JavaScript에서는 parse() 메소드를 사용하여 JSON 문자열 데이터를 JavaScript 객체로 변환할 수 있습니다. 이 메서드는 JSON 문자열을 수락하고 JavaScript 개체를 매개 변수로 반환합니다.

기본 구문:

let objectData = JSON.parse(jsonStringData);

예제 코드:

<script>

let stringJSON = '{"name":"user name", "age":15, "city":"city name"}'

const javascriptObject = JSON.parse(stringJSON);

console.log("converted data :")

console.log(javascriptObject)

</script>

출력:

   "converted data :"
 {
     age: 15,

     city: "city name",

     name: "user name"

    }

예제 코드 설명:

  1. 이 JavaScript 소스 코드에서 JSON 문자열 데이터를 선언했습니다.
  2. 그런 다음 parse() 메서드를 사용하고 JSON 문자열 데이터를 매개 변수로 전달하고 결과를 변수에 저장했습니다.
  3. 마지막으로 console.log()를 사용하여 변환된 데이터를 표시했습니다.

stringify() 메서드를 사용하여 형식화되고 읽기 쉬운 JSON 생성

JavaScript에서 stringify() 메서드를 사용하여 JavaScript 개체를 JSON 문자열 데이터로 변환할 수 있습니다. 이 메서드는 매개변수로 JavaScript 개체를 허용합니다.

기본 구문:

let jsonString = JSON.stringify(jsonObject);

예제 코드:

<script>

let jsonObject = {

 age: 15,

 city: "city name",

 name: "user name"

}

const jsonString = JSON.stringify(jsonObject);

console.log("converted data :")

console.log(jsonString)

</script>

출력:

"converted data :"

   "{\"age\":15,\"city\":\"city name\",\"name\":\"user name\"}"

예제 코드 설명:

  1. 위의 JavaScript 소스 코드에서 JSON 객체 데이터를 선언했습니다.
  2. 그런 다음 stringify() 메서드를 사용하여 JSON 객체 데이터를 매개 변수로 전달하고 결과를 변수에 저장했습니다.
  3. 마지막으로 console.log()를 사용하여 변환된 데이터를 표시했습니다.

관련 문장 - JavaScript JSON