Tipy a triky - ako rýchlo zobraziť obsah objektu

Jednou z veľmi často vykonávaných úloh pri tvorbe webových aplikácií je prezeranie obsahu objektov. Aj keď konzola v prehliadačoch ponúka celkom dobré možnosti na zobrazovanie obsahu objektov, je možné použiť aj riešenia JavaScriptu alebo frameworku Dojo.

Ak sa rozhodnete pre frameworku Dojo, k dispozícii je modul dojo/_base/json a metóda toJson(), ktorá zobrazí objekt ako JSON. Pre zobrazenie formátovaného výpisu je možné použiť argument true. Ak argument nebude použitý, výpis objektu bude v jednom riadku bez odsadenia a zalomenia.

Príklad: Zobrazenie obsahu objektov bez formátovania a s formátovaním.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
require(["dojo/ready", "dojo/_base/json"], function(ready, object) {
  ready(function() {
    var Obj = {
      prop1 : 1,
      Obj : {
        prop1 : 1,
        Obj : {
          prop1 : 1
        }
      },
      prop2 : 2,
      Arr : [{prop1 : 1}, {prop2 : 2}]
    };
 
    function constructor() {
      this.prop1 = 10;
    }
 
    // without formatting
    console.log(object.toJson(Obj));
    console.log(object.toJson(new constructor()));
 
    // with formatting
    console.log(object.toJson(Obj, true));
    console.log(object.toJson(new constructor(), true));
 
  });
});
require(["dojo/ready", "dojo/_base/json"], function(ready, object) {
  ready(function() {
    var Obj = {
      prop1 : 1,
      Obj : {
        prop1 : 1,
        Obj : {
          prop1 : 1
        }
      },
      prop2 : 2,
      Arr : [{prop1 : 1}, {prop2 : 2}]
    };
 
    function constructor() {
      this.prop1 = 10;
    }
 
    // without formatting
    console.log(object.toJson(Obj));
    console.log(object.toJson(new constructor()));
 
    // with formatting
    console.log(object.toJson(Obj, true));
    console.log(object.toJson(new constructor(), true));
 
  });
});

Metóda toJson() zobrazuje aj pole objektov, nielen objekty. Obsahy objektov sa zobrazujú v konzole internetového prehliadača. V prípade, že je nahratý modul dojo/_base/json, stačí v platnom scope zadať do konzoly príkaz object.toJson(Obj).

Podobným riešením je aj použitie natívneho objektu jazyka JavaScript s názvom JSON a metódy stringify(). Výsledok zobrazenia objektu je rovnaký ako pri použití riešenia z frameworku Dojo.

Príklad: Použitie objektu JSON a metódy stringify().

1
2
3
4
5
6
7
8
9
10
11
12
13
var Obj = {
  prop1 : 1,
  Obj : {
    prop1 : 1,
    Obj : {
      prop1 : 1
    }
  },
  prop2 : 2,
  Arr : [{prop1 : 1}, {prop2 : 2}]
};
 
console.log(JSON.stringify(Obj, null, 4));
var Obj = {
  prop1 : 1,
  Obj : {
    prop1 : 1,
    Obj : {
      prop1 : 1
    }
  },
  prop2 : 2,
  Arr : [{prop1 : 1}, {prop2 : 2}]
};

console.log(JSON.stringify(Obj, null, 4));

Argumentmi metódy stringify() sú objekt, replacer a space. Replacer je funkcia, ktorá upravuje hodnoty a vlastnosti. Keďže replacer nebol použitý, druhý argument má hodnotu null. Tretím argumentom je celé číslo, ktoré definuje odsadenie pre funkciu pretty print.

Záver

Pre sfunkčnenie uvedeného kódu je možné použiť šablónu dokumentu HTML5 alebo HTML5 pre Dojo. JavaScriptové riešenie je funkčné len v internetových prehliadačoch, ktoré podporujú ECMAScript 5.

Tipy a triky - ako rýchlo zobraziť obsah objektu

Záver

Komentáre

Pridať komentár