Imprimer un objet analysé JSON?


200

J'ai un objet javascript qui a été analysé en JSON en utilisant JSON.parseJe veux maintenant imprimer l'objet afin de pouvoir le déboguer (quelque chose ne va pas avec la fonction). Quand je fais ce qui suit ...

for (property in obj) {
    output += property + ': ' + obj[property]+'; ';
}
console.log(output);

Je reçois plusieurs [Object Object] répertoriés. Je me demande comment est-ce que j'imprimerais ceci pour voir le contenu?


5
en tant que sidenote, for (propriété dans obj) répertorie toutes les propriétés, même celles héritées. Ainsi, vous obtiendrez beaucoup de cominng étrangers pour Object.prototype et toute «classe mère». Ceci n'est pas pratique avec les objets json. Vous devez les filtrer avec hasOwnProperty () pour obtenir uniquement les propriétés que cet objet possède.
BiAiB

Réponses:


124

La plupart des consoles de débogage prennent en charge l'affichage direct des objets. Utilisez simplement

console.log(obj);

Selon votre débogueur, cela affichera très probablement l'objet dans la console sous la forme d'une arborescence réduite. Vous pouvez ouvrir l'arborescence et inspecter l'objet.


122
Il convient de mentionner que dans Chrome (et peut-être d'autres navigateurs) lorsqu'il est combiné avec une chaîne comme celle- console.log("object: " + obj)ci : il n'affiche pas l'objet, mais affiche à la place "object: [Object obj]".
Shahar

24
@Shahar console.log("object: %O", obj)(Chrome) ou console.log("object: %o", obj)(Firefox | Safari) vous donnera accès aux détails de l'objet, voir ma réponse ci-dessous.
Dave Anderson

1
@DaveAnderson bonne photo pour la mise en forme de l'objet dans la console.
lekant

@Shahar merci, les informations dont j'avais besoin étaient les vôtres. Doit être ajouté à la réponse.
Leo Flaherty

3
En plus de la méthode de @DaveAnderson, l'utilisation d'une virgule pour séparer les chaînes des objets peut également fonctionner:console.log("My object: ", obj)
Shahar

571

Vous savez ce que signifie JSON? Notation d'objet JavaScript . Cela fait un assez bon format pour les objets.

JSON.stringify(obj) vous donnera une représentation sous forme de chaîne de l'objet.


12
Je suis surpris que cette réponse soit en bas ...... Cela devrait être la réponse acceptée :-)
Mingyu

1
Et si vous ne voulez pas une représentation sous forme de chaîne, mais plutôt l'objet tel qu'il apparaîtrait dans un éditeur de code?
SuperUberDuper

5
@SuperUberDuper: ... Alors vous n'essaieriez pas de construire une représentation de chaîne, maintenant, n'est-ce pas? :)
cHao

Je crois que SuperUberDuper demandait si l'objet pouvait être enregistré ou visualisé sans le convertir en chaîne. Si vous visualisez dans le navigateur le DOM a besoin d'un élément, vous pouvez donc stringifier json et définir le contenu d'un élément innerHTML sur cette chaîne pour l'afficher sur la page.
jasonleonhard

Par exemple: importez Json depuis './data.json'; var el = document.createElement ('div'); el.innerHTML = JSON.stringify (Json);
jasonleonhard

54

essayez console.dir()au lieu deconsole.log()

console.dir(obj);

MDN dit console.dir()est soutenu par:

  • FF8 +
  • IE9 +
  • Opéra
  • Chrome
  • Safari

1
Uniquement disponible dans IE9 +
jasonscript

3
console.dir()est également disponible dans FF8 +, Opera, Chrome et Safari: developer.mozilla.org/en-US/docs/Web/API/console.dir
olibre

Génial! C'est la meilleure solution pour moi. Merci.
Hoang Le

1
qu'en est-il du nœud js?
Xsmael

bon, mais ne prend pas en charge la concaténation de chaînes comme log ("chaîne" + variable)
Nassim

47

Si vous voulez un joli JSON multiligne avec indentation, vous pouvez utiliser JSON.stringifyavec son 3ème argument:

JSON.stringify(value[, replacer[, space]])

Par exemple:

var obj = {a:1,b:2,c:{d:3, e:4}};

JSON.stringify(obj, null, "    ");

ou

JSON.stringify(obj, null, 4);

vous donnera le résultat suivant:

"{
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}"

Dans un navigateur, le travail console.log(obj)est encore meilleur, mais pas dans une console shell (node.js).


40

pour imprimer un objet analysé JSON, tapez simplement

console.log( JSON.stringify(data, null, " ") );

et vous obtiendrez une sortie très claire


25

Utilisez des formats de chaîne;

console.log("%s %O", "My Object", obj);

Chrome a des spécificateurs de format avec les éléments suivants;

  • %s Formate la valeur sous forme de chaîne.
  • %dou %iFormate la valeur sous forme d'entier.
  • %f Formate la valeur sous forme de valeur à virgule flottante.
  • %o Formate la valeur comme un élément DOM extensible (comme dans le panneau Eléments).
  • %O Formate la valeur en tant qu'objet JavaScript extensible.
  • %c Formate la chaîne de sortie en fonction des styles CSS que vous fournissez.

Firefox a également des sous-positions de chaînes qui ont des options similaires.

  • %oGénère un lien hypertexte vers un objet JavaScript. Cliquer sur le lien ouvre un inspecteur.
  • %dou %iProduit un entier. Le formatage n'est pas encore pris en charge.
  • %s Génère une chaîne.
  • %fGénère une valeur à virgule flottante. Le formatage n'est pas encore pris en charge.

Safari dispose de formateurs de style printf

  • %dou %iEntier
  • %[0.N]f Valeur en virgule flottante avec N chiffres de précision
  • %o Objet
  • %s Chaîne

1
belle réponse de référence
David

1
% O est vraiment utile
everton

4

Agréable et simple:

console.log("object: %O", obj)

1
pourriez-vous décrire à quoi sert% O? devrait-il être O spécifiquement? - votre solution fonctionne comme un charme
Anthonius

O signifie objet, donc tant que l'objet peut être imprimé sous forme de chaîne, il doit être imprimé sans problème. Cela m'a aidé à dépanner dans de nombreux cas où je ne savais pas où l'erreur était
mbenhalima

J'ai oublié de renseigner ici, en fait nous n'avons pas besoin d'utiliser% O. Nous pouvons directement utiliser console.log ("object:", obj) merci @mbenhalima
Anthonius

3

Utilisez simplement

console.info("CONSOLE LOG : ")
console.log(response);
console.info("CONSOLE DIR : ")
console.dir(response);

et vous obtiendrez ceci dans la console chrome:

CONSOLE LOG : 
facebookSDK_JS.html:56 Object {name: "Diego Matos", id: "10155988777540434"}
facebookSDK_JS.html:57 CONSOLE DIR : 
facebookSDK_JS.html:58 Objectid: "10155988777540434"name: "Diego Matos"__proto__: Object

2

Fonction simple pour alerter le contenu d'un objet ou d'un tableau.
Appelez cette fonction avec un tableau ou une chaîne ou un objet dont elle alerte le contenu.

Fonction

function print_r(printthis, returnoutput) {
    var output = '';

    if($.isArray(printthis) || typeof(printthis) == 'object') {
        for(var i in printthis) {
            output += i + ' : ' + print_r(printthis[i], true) + '\n';
        }
    }else {
        output += printthis;
    }
    if(returnoutput && returnoutput == true) {
        return output;
    }else {
        alert(output);
    }
}

Usage

var data = [1, 2, 3, 4];
print_r(data);

2

Le code suivant affichera les données json complètes dans la boîte d'alerte

var data= '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

json = JSON.parse(data);
window.alert(JSON.stringify(json));

2

Si vous voulez déboguer, pourquoi ne pas utiliser le débogage de la console

window.console.debug(jsonObject);

0

Si vous travaillez en js sur un serveur, juste un peu plus de gymnastique va un long chemin ... Voici mon ppos (pretty-print-on-server):

ppos = (object, space = 2) => JSON.stringify(object, null, space).split('\n').forEach(s => console.log(s));

ce qui permet de créer quelque chose que je peux réellement lire lorsque j'écris du code serveur.


0

Je ne sais pas comment cela n'a jamais été fait officiellement, mais j'ai ajouté ma propre jsonméthode pour consolem'opposer à l'impression plus facile des journaux stringifiés:

L'observation d'objets (non primitifs) en javascript est un peu comme la mécanique quantique. Ce que vous "mesurez" n'est peut-être pas l'état réel, qui a déjà changé.

console.json = console.json || function(argument){
    for(var arg=0; arg < arguments.length; ++arg)
        console.log(  JSON.stringify(arguments[arg], null, 4)  )
}

// use example
console.json(   [1,'a', null, {a:1}], {a:[1,2]}    )

Plusieurs fois, il est nécessaire d'afficher une version chaîne d'un objet car l'impression en l'état (objet brut) imprimera une version "en direct" de l'objet qui subit une mutation à mesure que le programme progresse et ne reflétera pas l'état de l'objet au point de connexion, par exemple:

var foo = {a:1, b:[1,2,3]}

// lets peek under the hood
console.log(foo) 

// program keeps doing things which affect the observed object
foo.a = 2
foo.b = null
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.