Ik heb een AngularJS-toepassing, die gegevens van invoer verzamelt, een model omzet in een tekenreeks met behulp van JSON.stringify()en een gebruiker dit model zo laat bewerken dat invoervelden worden bijgewerkt als het element <textarea>wordt bijgewerkt en vice versa. Een soort van tweerichtingsbinding 🙂
Het probleem is dat de String zelf er lelijk uitziet en ik zou hem zo willen formatteren dat hij er als volgt uitziet:
En niet zoals het er nu uitziet:
Enig idee hoe dit kan worden bereikt? Als u wat aanvullende informatie nodig heeft, aarzel dan niet om te vragen. Elk antwoord wordt zeer op prijs gesteld en onmiddellijk beantwoord.
Bedankt.
P.S. Ik denk dat dit een soort richtlijn of een aangepast filter zou moeten zijn. De gegevens zelf MOETEN NIET worden gewijzigd, alleen de uitvoer.
Antwoord 1, autoriteit 100%
Angular heeft een ingebouwd filtervoor het weergeven van json
<pre>{{data | json}}</pre>
Let op het gebruik van de pre-tag om witruimte en regeleinden te behouden
Demo:
angular.module('app', [])
.controller('Ctrl', ['$scope',
function($scope) {
$scope.data = {
a: 1,
b: 2,
c: {
d: "3"
},
};
}
]);<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="[email protected]" data-semver="1.2.15" src="//code.angularjs.org/1.2.15/angular.js"></script>
</head>
<body ng-controller="Ctrl">
<pre>{{data | json}}</pre>
</body>
</html>Antwoord 2, autoriteit 15%
U kunt een optionele parameter van JSON.stringify()
. gebruiken
JSON.stringify(value[, replacer [, space]])Parameters
- waardeDe waarde die moet worden geconverteerd naar een JSON-tekenreeks.
- vervangerAls een functie,
transformeert waarden en eigenschappen die u tegenkomt tijdens het stringificeren; als een
array, specificeert de set eigenschappen die zijn opgenomen in objecten in de
laatste snaar. Een gedetailleerde beschrijving van de vervangingsfunctie is:
geleverd in het javaScript-gidsartikel Native JSON gebruiken.- spatie
Zorgt ervoor dat de resulterende string behoorlijk wordt afgedrukt.
Bijvoorbeeld:
JSON.stringify({a:1,b:2,c:{d:3, e:4}},null," ")
geeft u het volgende resultaat:
"{
"a": 1,
"b": 2,
"c": {
"d": 3,
"e": 4
}
}"
Antwoord 3, autoriteit 5%
Als u JSON als HTML wilt weergeven en het kan worden samengevouwen/geopend, kunt u deze instructie gebruiken die ik zojuist heb gemaakt om het netjes weer te geven:
https://github.com/mohsen1/json-formatter/
Antwoord 4, autoriteit 2%
Naast het reeds genoemde hoekige json-filteris er ook de hoekige toJson()-functie.
angular.toJson(obj, pretty);
Met de tweede parameter van deze functie kun je mooi afdrukken inschakelen en het aantal te gebruiken spaties instellen.
Indien ingesteld op waar, bevat de JSON-uitvoer nieuwe regels en witruimte. Indien ingesteld op een geheel getal, bevat de JSON-uitvoer zoveel spaties per inspringing.
(standaard: 2)
Antwoord 5
Ik neem aan dat je wilt gebruiken om de json-tekst te bewerken.
Dan kun je de manier van ivarni gebruiken:
{{data | json}}
en voeg een adition-kenmerk toe om
bewerkbaarte maken
<pre contenteditable="true">{{data | json}}</pre>
Ik hoop dat dit je kan helpen.
Antwoord 6
Als je de JSON wilt formatteren en ook wat syntaxisaccentuering wilt doen, kun je de ng-prettyjson-instructie gebruiken. Bekijk het npm-pakket.
Zo gebruik je het: <pre pretty-json="jsonObject"></pre>