utilisation de jsonview jquery

JSONView est un plug-in de navigateur très pratique pour afficher les données au format JSON dans le navigateur. Dans cet article, nous présenterons comment le plugin JSONView fonctionne avec jQuery, nous permettant de visualiser facilement les données JSON de manière lisible.

Installation du plug-in du navigateur JSONView

Tout d'abord, nous devons installer le plug-in JSONView dans notre navigateur. JSONView est disponible dans de nombreuses versions différentes, y compris celles pour les navigateurs tels que Chrome, Firefox et Safari. Nous couvrirons ici les versions Chrome et Firefox du plugin JSONView. Vous pouvez y accéder via les liens suivants :

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

Après avoir installé JSONView, vous pouvez formater et afficher les données en cliquant avec le bouton droit sur les données au format JSON et en sélectionnant "JSONView : Formater JSON".

Utilisation des plug-ins jQuery et JSONView

Pour utiliser les plug-ins jQuery et JSONView, les scripts des plug-ins jQuery et JSONView doivent d'abord être importés dans la page. Nous pouvons y parvenir en ajoutant le balisage suivant à la page :

<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>

Ensuite, nous devons définir un objet JavaScript qui contient les données JSON. Dans cet article, nous utiliserons les exemples de données JSON suivants :

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"
    }
  ]
};

Nous pouvons maintenant utiliser jQuery et le plugin JSONView pour afficher ces données JSON de manière lisible. Nous pouvons utiliser le code suivant dans la page pour y parvenir :

$(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);
});

Ce code convertit d'abord les données JSON en chaîne et utilise le plugin JSONView pour les formater et les afficher dans l'élément HTML avec l'ID "json".

Lorsque vous utilisez le plugin JSONView, vous pouvez également transmettre des options pour personnaliser la représentation. Dans cet article, nous utiliserons les options suivantes :

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

Ces options rendront les données JSON toujours développées, réduites de manière récursive et incluront des espaces supplémentaires dans la sortie pour une lisibilité accrue. Ainsi, nous pouvons utiliser le code suivant pour appliquer des options personnalisées :

$(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);
});

Pour résumer, nous avons vu comment visualiser les données JSON de manière lisible en utilisant jQuery et le plugin JSONView. JSONView est un plug-in de navigateur très utile qui facilite le formatage et la navigation des données au format JSON. En combinant jQuery, nous pouvons rendre la visualisation des données JSON plus pratique et personnalisable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!