Kaip spausdinti „Json“ naudojant „JavaScript“?

Kaip galiu rodyti JSON įskaitomą (skaitytojams) formatą? Visų pirma ieško įtraukų ir tarpų, galbūt net spalvų / stiliaus šriftų ir kt.

1542
27 янв. Pažymėti rinkinį sausio 27 d 2011-01-27 01:33 '11 ne 1:33 2011-01-27 01:33
ответ 21 atsakymas

JSON.stringify() spausdinimo versija iš pradžių JSON.stringify() . Trečiasis argumentas leidžia spausdinti ir nustatyti naudojimo intervalą:

 var str = JSON.stringify(obj, null, 2); // spacing level = 2 

Jei jums reikia sintaksės paryškinimo, galite naudoti tam tikrą reguliarią išraišką tokį:

 function syntaxHighlight(json) { if (typeof json != 'string') { json = JSON.stringify(json, undefined, 2); } json = json.replace(/ ' ' ' return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) { var cls = 'number'; if (/^"/.test(match)) { if (/:$/.test(match)) { cls = 'key'; } else { cls = 'string'; } } else if (/true|false/.test(match)) { cls = 'boolean'; } else if (/null/.test(match)) { cls = 'null'; } return '<span class="' + cls + '">' + match + '</span>'; }); } 

Žr. Čia: jsfiddle

Arba visas toliau pateiktas fragmentas:

 pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; } .string { color: green; } .number { color: darkorange; } .boolean { color: blue; } .null { color: magenta; } .key { color: red; } 
3481
28 авг. atsakymas, kurį pateikė user123444555621 28 rug . 2011-08-28 13:56 '11, 13:56, 2011-08-28 13:56

Atsakymas iš Pumbaa80 yra puikus, jei turite objektą, kurį norite spausdinti. Jei pradėsite naudoti galiojančią JSON eilutę norite spausdinti, pirmiausia turite ją konvertuoti į objektą:

 var jsonString = '{"some":"json"}'; var jsonPretty = JSON.stringify(JSON.parse(jsonString),null,2); 
border=0

Tai sukuria JSON objektą iš eilutės, o tada konvertuoja jį į eilutę, naudodamas JSON, sukuria gana spausdintą versiją.

172
21 июня '13 в 23:35 2013-06-21 23:35 atsakymą pateikė „ Rick Hanlon II “ birželio 13 d., 23:35, 2013-06-21 23:35

Remiantis atsakymu iš „Pumbaa80“, aš pakeitiau kodą, kad galėčiau naudoti „konsolės“ žurnalo spalvas (dirbant „Chrome“ tikrai), o ne HTML. Išėjimas gali būti matomas konsolės viduje. Galite redaguoti _variables funkcijos viduje, pridėdami keletą stilių.

 function JSONstringify(json) { if (typeof json != 'string') { json = JSON.stringify(json, undefined, '\t'); } var arr = [], _string = 'color:green', _number = 'color:darkorange', _boolean = 'color:blue', _null = 'color:magenta', _key = 'color:red'; json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) { var style = _number; if (/^"/.test(match)) { if (/:$/.test(match)) { style = _key; } else { style = _string; } } else if (/true|false/.test(match)) { style = _boolean; } else if (/null/.test(match)) { style = _null; } arr.push(style); arr.push(''); return '%c' + match + '%c'; }); arr.unshift(json); console.log.apply(console, arr); } 

Čia yra knygelė, kurią galite naudoti:

 javascript:function JSONstringify(json) {if (typeof json != 'string') {json = JSON.stringify(json, undefined, '\t');}var arr = [],_string = 'color:green',_number = 'color:darkorange',_boolean = 'color:blue',_null = 'color:magenta',_key = 'color:red';json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {var style = _number;if (/^"/.test(match)) {if (/:$/.test(match)) {style = _key;} else {style = _string;}} else if (/true|false/.test(match)) {style = _boolean;} else if (/null/.test(match)) {style = _null;}arr.push(style);arr.push('');return '%c' + match + '%c';});arr.unshift(json);console.log.apply(console, arr);};void(0); 

Naudoti:

 var obj = {a:1, 'b':'foo', c:[false,null, {d:{e:1.3e5}}]}; JSONstringify(obj); 

Redaguoti: tik po to, kai paskelbiau kintamuosius, bandžiau vengti šio simbolio:

 json = json.replace(/%/g, '%%'); 

Tačiau sužinojau, kad „Chrome“ nepalaiko% pabėgimo iš konsolės. Keista ... Galbūt ji veiks ateityje.

Hooray!

2019

29 янв. Milen Boev atsakymas, pateiktas sausio 29 d 2014-01-29 16:16 '14, 16:16 2014-01-29 16:16

Aš naudoju „JSONView Chrome“ plėtinį (jis yra toks gražus, kaip paaiškėja :):

Redaguoti: pridėta jsonreport.js

Aš taip pat išleidau atskirą JSON JSON žiūryklę, jsonreport.js, kuris yra įskaitomas HTML5 pranešimas, kurį galite naudoti norėdami peržiūrėti bet kokius JSON duomenis.

Daugiau apie formatą skaitykite nauju HTML HTML5 formatu .

20
27 янв. Atsakymą pateikė mythz 27 sausis 2011-01-27 01:37 '11 prie 1:37 2011-01-27 01:37

Galite naudoti console.dir() , kuris yra nuorodos į console.log(util.inspect()) . (Vienintelis skirtumas yra tas, kad jis apeina bet kokį inspect() vartotojo apibrėžtą objektą.

Jis naudoja sintaksės atranką , intelektualią įtrauką , pašalina kabučių kabutes ir tiesiog daro išvestį taip gražiai, kaip jis yra.

 const object = JSON.parse(jsonString) console.dir(object, {depth: null, colors: true}) 

ir komandų eilutei:

cat package.json | node -e "process.stdin.pipe(new stream.Writable({write: chunk => console.dir(JSON.parse(chunk), {depth: null, colors: true})}))"

14
14 нояб. atsakymas duotas adius 14 nov. 2015-11-14 12:46 '15, 12:46, 2015-11-14 12:46

Geriausias būdas.

Pateikite JSON masyvą javascript'e

 JSON.stringify(jsonobj,null,'\t') 
9
21 окт. Charmie atsakė spalio 21 d 2017-10-21 13:19 '17 13:19 2017-10-21 13:19
 var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07", "postalCode": "75007", "countryCode": "FRA", "countryLabel": "France" }; document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj); 

//, jei rodomas HTML, turite pridėti balisą <pre> </ PRE>

 document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>" 
6
01 марта '17 в 18:42 2017-03-01 18:42 atsakymą pateikė Adel MANI kovo 1, 17 d., 18:42 2017-03-01 18:42

Naudojant derinimo tikslą naudoju:

 console.debug ("% o", duomenys);
6
10 янв. atsakymas duotas gavenkoa 10 sausis 2013-01-10 17:11 '13, 17:11, 2013-01-10 17:11

Nepatenkintas kitų gražių Ruby spausdintuvų, aš parašiau savo ( NeatJSON ) ir tada perkėlė jį į „JavaScript“ , įskaitant nemokamą formatavimą internete . Kodas yra nemokamas pagal MIT licenciją (gana leistinas).

Savybės (visos neprivalomos):

  • Nustatykite linijos plotį ir suvyniokite jį taip, kad objektai ir matricos būtų saugomos vienoje eilutėje, kai jos tinka, įvesdami vieną vertę eilutėje, kai jos nėra.
  • Rūšiuoti objektų raktus, jei norite.
  • Sulygiuokite objekto raktus (suderinkite dvitaškį).
  • Formatuokite slankiojo kablelio numerius tam tikru dešimtainiu skaičiumi, nepažeisdami sveikų skaičių.
  • „Trumpas“ apvyniojimo režimas nustato atidarymo ir uždarymo skliaustelius / garbanotuosius skliaustelius ta pačia linija kaip ir vertes, suteikiant tam tikrą formatą.
  • Granuliuotas atstumas tarp masyvų ir objektų tarp skliaustų, prieš ir po dvitaškių ir kablelių.
  • Ši funkcija prieinama ir žiniatinklio naršyklėms, ir Node.js.

Čia nukopijuosiu šaltinio kodą, kad jis būtų ne tik nuoroda į biblioteką, bet raginu jus eiti į „ GitHub“ puslapį, nes tai bus atnaujinta, o toliau nurodytas kodas nebus.

4
20 апр. atsakymą pateikė Phrogz balandžio 20 d 2015-04-20 00:49 '15 - 0:49 2015-04-20 00:49

Labai ačiū @all! Remiantis ankstesniais atsakymais, čia yra dar vienas variantų metodas, kuris suteikia pasirinktines pakeitimo taisykles kaip parametrą:

  renderJSON : function(json, rr, code, pre){ if (typeof json !== 'string') { json = JSON.stringify(json, undefined, '\t'); } var rules = { def : 'color:black;', defKey : function(match){ return '<strong>' + match + '</strong>'; }, types : [ { name : 'True', regex : /true/, type : 'boolean', style : 'color:lightgreen;' }, { name : 'False', regex : /false/, type : 'boolean', style : 'color:lightred;' }, { name : 'Unicode', regex : /"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?/, type : 'string', style : 'color:green;' }, { name : 'Null', regex : /null/, type : 'nil', style : 'color:magenta;' }, { name : 'Number', regex : /-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/, type : 'number', style : 'color:darkorange;' }, { name : 'Whitespace', regex : /\s+/, type : 'whitespace', style : function(match){ return ' } } ], keys : [ { name : 'Testkey', regex : /("testkey")/, type : 'key', style : function(match){ return '<h1>' + match + '</h1>'; } } ], punctuation : { name : 'Punctuation', regex : /([\,\.\}\{\[\]])/, type : 'punctuation', style : function(match){ return '<p>________</p>'; } } }; if('undefined' !== typeof jQuery){ rules = $.extend(rules, ('object' === typeof rr) ? rr : {}); }else{ for(var k in rr ){ rules[k] = rr[k]; } } var str = json.replace(/([\,\.\}\{\[\]]|"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) { var i = 0, p; if (rules.punctuation.regex.test(match)) { if('string' === typeof rules.punctuation.style){ return '<span style="'+ rules.punctuation.style + '">' + match + '</span>'; }else if('function' === typeof rules.punctuation.style){ return rules.punctuation.style(match); } else{ return match; } } if (/^"/.test(match)) { if (/:$/.test(match)) { for(i=0;i<rules.keys.length;i++){ p = rules.keys[i]; if (p.regex.test(match)) { if('string' === typeof p.style){ return '<span style="'+ p.style + '">' + match + '</span>'; }else if('function' === typeof p.style){ return p.style(match); } else{ return match; } } } return ('function'===typeof rules.defKey) ? rules.defKey(match) : '<span style="'+ rules.defKey + '">' + match + '</span>'; } else { return ('function'===typeof rules.def) ? rules.def(match) : '<span style="'+ rules.def + '">' + match + '</span>'; } } else { for(i=0;i<rules.types.length;i++){ p = rules.types[i]; if (p.regex.test(match)) { if('string' === typeof p.style){ return '<span style="'+ p.style + '">' + match + '</span>'; }else if('function' === typeof p.style){ return p.style(match); } else{ return match; } } } } }); if(true === pre)str = '<pre>' + str + '</pre>'; if(true === code)str = '<code>' + str + '</code>'; return str; } 
3
09 сент. atsakymą pateikė webfan 09 rugsėjis 2015-09-09 10:40 '15 , 10:40 2015-09-09 10:40

„Douglas Crockford JSON“ „JavaScript“ bibliotekoje greičiau spausdins JSON, naudodamas griežtą metodą.

Taip pat galite rasti atsakymus į šį seną klausimą: kaip galiu spausdinti JSON (unix) scenarijų apvalkalu?

2
19 февр. atsakymas pateikiamas vasario 19 d 2011-02-19 08:17 '11 at 8:17 2011-02-19 08:17

Šiandien susidūriau su @ Pumbaa80 kodu. Bandau pritaikyti JSON sintaksę į duomenis, kuriuos JSON.stringify , todėl turiu sukurti DOM mazgus visiems JSON.stringify išėjime.

Aš taip pat labai ilgą reguliarią išraišką padaliau į savo sudėtines dalis.

. 

2
16 мая '14 в 2:07 2014-05-16 02:07 atsakymą pateikė Justas Jake, gegužės 16, 14 d., 14:07, 2014-05-16 02:07

Jei jums reikia to dirbti teksto lauke, sprendimas neveiks.

<textarea id='textarea'></textarea>

$("#textarea").append(formatJSON(JSON.stringify(jsonobject),true));

 function formatJSON(json,textarea) { var nl; if(textarea) { nl = " } else { nl = "<br>"; } var tab = " var ret = ""; var numquotes = 0; var betweenquotes = false; var firstquote = false; for (var i = 0; i < json.length; i++) { var c = json[i]; if(c == '"') { numquotes ++; if((numquotes + 2) % 2 == 1) { betweenquotes = true; } else { betweenquotes = false; } if((numquotes + 3) % 4 == 0) { firstquote = true; } else { firstquote = false; } } if(c == '['  !betweenquotes) { ret += c; ret += nl; continue; } if(c == '{'  !betweenquotes) { ret += tab; ret += c; ret += nl; continue; } if(c == '"'  firstquote) { ret += tab + tab; ret += c; continue; } else if (c == '"'  !firstquote) { ret += c; continue; } if(c == ','  !betweenquotes) { ret += c; ret += nl; continue; } if(c == '}'  !betweenquotes) { ret += nl; ret += tab; ret += c; continue; } if(c == ']'  !betweenquotes) { ret += nl; ret += c; continue; } ret += c; } // i loop return ret; } 
1
05 апр. Atsakymas pateikiamas Kolob Canyon 05 balandžio. 2017-04-05 03:13 '17 at 3:13 2017-04-05 03:13

Veikia gerai:

 console.table() 

Skaitykite daugiau čia: https://developer.mozilla.org/pt-BR/docs/Web/API/Console/table

1
15 марта '17 в 14:03 2017-03-15 14:03 atsakymas duotas pedro kovo 15 d. 17: 14 val

 #json { white-space: pre; } 

Aš rekomenduoju naudoti „ HighlightJS“ . Jis naudoja tą patį principą, kaip ir priimtas atsakymas, bet taip pat veikia daugelyje kitų kalbų ir turi daug iš anksto nustatytų spalvų schemų . Jei naudojate „ RequireJS“ , galite sukurti suderinamą modulį

 python3 tools/build.py -tamd json xml <specify other > 

Generacija priklauso nuo „Python3“ ir „Java“. Pridėti -n kad sukurtumėte nepakeistą versiją.

0
03 сент. Atsakymas pateikiamas Rok Strniša 03 sep . 2014-09-03 16:32 '14 at 16:32 2014-09-03 16:32

Štai kaip galite spausdinti nenaudodami integruotos funkcijos.

 function pretty(ob, lvl = 0) { let temp = []; if(typeof ob === "object"){ for(let x in ob) { if(ob.hasOwnProperty(x)) { temp.push( getTabs(lvl+1) + x + ":" + pretty(ob[x], lvl+1) ); } } return "{\n"+ temp.join(",\n") +"\n" + getTabs(lvl) + "}"; } else { return ob; } } function getTabs(n) { let c = 0, res = ""; while(c++ < n) res+="\t"; return res; } let obj = {a: {b: 2}, x: {y: 3}}; console.log(pretty(obj));  
0
24 нояб. atsakymas pateikiamas everlasto 24 lapkričio. 2017-11-24 23:11 '17 at 11:11 2017-11-24 23:11

Jei ieškote geros bibliotekos, skirtos internetiniam tinklalapiui priskirti „Json“

Prism.js yra gana gera.

http://prismjs.com/

Radau JSON.stringify (obj, undefined, 2), kad gautumėte įtrauką, o tada prizmės naudojimas temai pridėti buvo geras požiūris.

Jei įkraunate JSON per „ajax“ skambutį, galite paleisti vieną iš „Prism“ pagalbinių metodų, kad galėtumėte įvesti

Pavyzdžiui:

 Prism.highlightAll() 
0
19 нояб. Atsakymas pateikiamas chim . 2017-11-19 19:24 '17, 7:24 pm 2017-11-19 19:24

Tai malonu:

https://github.com/mafintosh/json-markupmafintosh

 const jsonMarkup = require('json-markup') const html = jsonMarkup({hello:'world'}) document.querySelector('#myElem').innerHTML = html 

HTML

 <link ref="stylesheet" href="style.css"> <div id="myElem></div> 

Čia galite rasti stiliaus lapo pavyzdį.

 https://raw.githubusercontent.com/mafintosh/json-markup/master/style.css 
0
23 дек. Atsakymą pateikia laidai 23 Dec 2016-12-23 01:14 '16 at 1:14 2016-12-23 01:14

Jei naudojate net.sf.json, galite įrašyti taip (naudodami 4 kartų trinkelę):

 JSONObject work = JSONObject.fromObject("{\"hi\":\"there\",\"more\":\"stuff\"}"); log.info("WORK="+work.toString(4)); 
-2
28 авг. Fredas Haslamas atsakė 28 rug. 2011-08-28 10:00 '11 10:00 val. 2011-08-28 10:00

Naudokite DLL Newtonsoft.Json. Jis veikia puikiai IE ir „Chrome“.

įdėkite šį kodą į skustuvo vaizdą

  if (Model.YourJsonSting!= null) { <pre> <code style="display:block;white-space:pre-wrap"> @JToken.Parse(Model.YourJsonSting).ToString(Formatting.Indented) </code> </pre> } 
-6
11 нояб. atsakymas vartotojo3942119 11 nov. 2015-11-11 23:57 '15, 23:57 2015-11-11 23:57

Kiti klausimai apie „ žymes yra arba Užduoti klausimą