web-dev-qa-db-fra.com

Comment afficher des données JSON brutes sur une page HTML

Dupliquer possible:
JSON joli imprimer en utilisant JavaScript

J'aimerais afficher mes données JSON brutes sur une page HTML, tout comme JSONview. Par exemple, mes données brutes JSON sont:

  {
   "hey":"guy",
   "anumber":243,
   "anobject":{
      "whoa":"nuts",
      "anarray":[
         1,
         2,
         "thr<h1>ee"
      ],
      "more":"stuff"
   },
   "awesome":true,
   "bogus":false,
   "meaning":null,
   "japanese":"明日がある。",
   "link":"http://jsonview.com",
   "notLink":"http://jsonview.com is great"
}

Cela vient de http://jsonview.com/ , et ce que je veux réaliser, c'est un peu comme http://jsonview.com/example.json si vous utilisez Chrome et avez installé le plugin JSONView.

J'ai essayé mais je n'ai pas compris comment cela fonctionne. J'aimerais utiliser un script JS (CSS à mettre en surbrillance) pour personnaliser mes données JSON brutes récupérées par ajax et les placer sur une page HTML à n'importe quelle position, par exemple dans un élément div. Existe-t-il des bibliothèques JS existantes pouvant atteindre cet objectif? Ou comment le faire? 

javascriptjqueryhtmlcssjson
20
timon.ma

Je pense que tout ce dont vous avez besoin pour afficher les données sur une page HTML est JSON.stringify .

Par exemple, si votre JSON est stocké comme ceci:

_var jsonVar = {
        text: "example",
        number: 1
    };
_

Ensuite, il vous suffit de faire ceci pour le convertir en chaîne:

_var jsonStr = JSON.stringify(jsonVar);
_

Et vous pouvez ensuite insérer directement dans votre code HTML, par exemple:

_document.body.innerHTML = jsonStr;
_

Bien sûr, vous voudrez probablement remplacer body par un autre élément via getElementById.

En ce qui concerne la partie CSS de votre question, vous pouvez utiliser RegExp pour manipuler l'objet stringifié avant de le placer dans le DOM. Par exemple, ce code ( = également sur JSFiddle à des fins de démonstration ) doit s’occuper de l’indentation des accolades.

_var jsonVar = {
        text: "example",
        number: 1,
        obj: {
            "more text": "another example"
        },
        obj2: {
             "yet more text": "yet another example"
        }
    }, // THE RAW OBJECT
    jsonStr = JSON.stringify(jsonVar),  // THE OBJECT STRINGIFIED
    regeStr = '', // A EMPTY STRING TO EVENTUALLY HOLD THE FORMATTED STRINGIFIED OBJECT
    f = {
            brace: 0
        }; // AN OBJECT FOR TRACKING INCREMENTS/DECREMENTS,
           // IN PARTICULAR CURLY BRACES (OTHER PROPERTIES COULD BE ADDED)

regeStr = jsonStr.replace(/({|}[,]*|[^{}:]+:[^{}:,]*[,{]*)/g, function (m, p1) {
var rtnFn = function() {
        return '<div style="text-indent: ' + (f['brace'] * 20) + 'px;">' + p1 + '</div>';
    },
    rtnStr = 0;
    if (p1.lastIndexOf('{') === (p1.length - 1)) {
        rtnStr = rtnFn();
        f['brace'] += 1;
    } else if (p1.indexOf('}') === 0) {
         f['brace'] -= 1;
        rtnStr = rtnFn();
    } else {
        rtnStr = rtnFn();
    }
    return rtnStr;
});

document.body.innerHTML += regeStr; // appends the result to the body of the HTML document
_

Ce code cherche simplement les sections de l'objet dans la chaîne et les sépare en div (bien que vous puissiez changer la partie HTML de celle-ci). Cependant, chaque fois qu’il rencontre une accolade, il augmente ou diminue l’indentation, selon qu’il s’agisse d’une accolade ouvrante ou d’un fermoir (comportement similaire à l’espace ) argument de 'JSON.stringify' ). Mais vous pouvez utiliser cela comme base pour différents types de formatage.

30
guypursey

Notez que le lien que vous avez fourni n'est pas une page HTML, mais plutôt un document JSON. Le formatage est fait par le navigateur.

Vous devez décider si:

  1. Vous voulez afficher le JSON brut (pas une page HTML), comme dans votre exemple
  2. Afficher une page HTML avec JSON formaté

Si vous voulez 1., indiquez simplement à votre application de rendre un corps de réponse avec le JSON, définissez le type MIME (application/json), etc. . Dans ce cas, le formatage est traité par le navigateur (et/ou les plugins du navigateur). )

Si 2., il s'agit de restituer une page HTML minimale simple avec le JSON, où vous pouvez la mettre en évidence de plusieurs manières:

  • côté serveur, en fonction de votre pile. Il existe des solutions pour presque toutes les langues
  • côté client avec les bibliothèques de surbrillance Javascript. 

Si vous donnez plus de détails sur votre pile, il est plus facile de fournir des exemples ou des ressources.

EDIT: Pour le surlignage JS côté client, vous pouvez essayer higlight.js , par exemple. 

6
Rui Vieira

JSON dans n'importe quelle balise HTML sauf la balise <script> serait un simple texte. Ainsi, c'est comme si vous ajoutiez une histoire à votre page HTML.

Cependant, à propos du formatage, c'est une autre affaire. Je suppose que vous devriez changer le titre de votre question.

Jetez un oeil à this question. Voir aussi this page.

0
Saeed Neamati