jsonview jquery 사용법

JSONView는 JSON 형식의 데이터를 브라우저에서 볼 수 있는 매우 편리한 브라우저 플러그인입니다. 이 기사에서는 JSONView 플러그인이 jQuery와 작동하여 JSON 데이터를 읽기 쉬운 방식으로 쉽게 볼 수 있는 방법을 소개합니다.

JSONView 브라우저 플러그인 설치

먼저 브라우저에 JSONView 플러그인을 설치해야 합니다. JSONView는 Chrome, Firefox, Safari와 같은 브라우저용 버전을 포함하여 다양한 버전으로 제공됩니다. 여기서는 JSONView 플러그인의 Chrome 및 Firefox 버전을 다룰 것입니다. 다음 링크를 통해 액세스할 수 있습니다:

• Chrome JSONView: https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc
• Firefox JSONView: https://addons.mozilla.org/zh-CN /firefox/addon/jsonview/

JSONView를 설치한 후 JSON 형식의 데이터를 마우스 오른쪽 버튼으로 클릭하고 "JSONView: JSON 형식 지정"을 선택하면 데이터 형식을 지정하고 볼 수 있습니다.

jQuery 및 JSONView 플러그인 사용

jQuery 및 JSONView 플러그인을 사용하려면 먼저 jQuery 및 JSONView 플러그인의 스크립트를 페이지로 가져와야 합니다. 페이지에 다음 마크업을 추가하면 이를 달성할 수 있습니다.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://raw.githubusercontent.com/bhollis/jsonview/master/src/jquery.jsonview.js"></script>

다음으로 JSON 데이터가 포함된 JavaScript 개체를 정의해야 합니다. 이 기사에서는 다음 샘플 JSON 데이터를 사용합니다.

var person = {
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "state": "CA",
    "zip": 12345
  },
  "phone": [
    {
      "type": "home",
      "number": "555-1234"
    },
    {
      "type": "work",
      "number": "555-5678"
    }
  ]
};

이제 jQuery 및 JSONView 플러그인을 사용하여 이 JSON 데이터를 읽을 수 있는 방식으로 볼 수 있습니다. 이를 달성하기 위해 페이지에서 다음 코드를 사용할 수 있습니다.

$(document).ready(function() {
  // Define the JSON data
  var person = {
    "name": "John Doe",
    "age": 30,
    "address": {
      "street": "123 Main St",
      "city": "Anytown",
      "state": "CA",
      "zip": 12345
    },
    "phone": [
      {
        "type": "home",
        "number": "555-1234"
      },
      {
        "type": "work",
        "number": "555-5678"
      }
    ]
  };

  // Convert the JSON data to a string
  var jsonData = JSON.stringify(person);

  // Use the JSONView plugin to format and display the JSON data
  $('#json').JSONView(jsonData);
});

이 코드는 먼저 JSON 데이터를 문자열로 변환하고 JSONView 플러그인을 사용하여 ID가 ​​"json"인 HTML 요소에 형식을 지정하고 표시합니다.

JSONView 플러그인을 사용할 때 표현을 사용자 정의하는 옵션을 전달할 수도 있습니다. 이 문서에서는 다음 옵션을 사용합니다.

{
  collapsed: false,
  recursive_collapser: true,
  output_padding: true
}

이러한 옵션을 사용하면 JSON 데이터가 항상 확장되고 재귀적으로 축소되며 가독성을 높이기 위해 출력에 추가 공백이 포함됩니다. 따라서 다음 코드를 사용하여 사용자 정의 옵션을 적용할 수 있습니다.

$(document).ready(function() {
  // Define the JSON data
  var person = {
    "name": "John Doe",
    "age": 30,
    "address": {
      "street": "123 Main St",
      "city": "Anytown",
      "state": "CA",
      "zip": 12345
    },
    "phone": [
      {
        "type": "home",
        "number": "555-1234"
      },
      {
        "type": "work",
        "number": "555-5678"
      }
    ]
  };

  // Convert the JSON data to a string
  var jsonData = JSON.stringify(person);

  // Define the options for JSONView
  var jsonOptions = {
    collapsed: false,
    recursive_collapser: true,
    output_padding: true
  };

  // Use the JSONView plugin to format and display the JSON data with the custom options
  $('#json').JSONView(jsonData, jsonOptions);
});

요약하자면, jQuery와 JSONView 플러그인을 사용하여 JSON 데이터를 읽기 쉬운 방식으로 보는 방법을 살펴보았습니다. JSONView는 JSON 형식의 데이터를 쉽게 포맷하고 찾아볼 수 있게 해주는 매우 유용한 브라우저 플러그인입니다. jQuery를 결합하면 JSON 데이터를 더욱 편리하게 보고 사용자 정의할 수 있습니다.

위 내용은 jsonview jquery 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!