Exemple de comment améliorer l'apparence de données JSON dans textarea input avec javascript (source):
<!DOCTYPE html><html lang="en"><head><title>JSON DATA</title><meta charset="utf-8"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script>function prettyPrint() {var ugly = document.getElementById('myTextArea').value;var obj = JSON.parse(ugly);var pretty = JSON.stringify(obj, undefined, 4);document.getElementById('myTextArea').value = pretty;}</script></head><body><textarea id="myTextArea" cols=50 rows=10></textarea><br><button onclick="prettyPrint()">Pretty Print</button></body></html>
avec bootstrap en plus:
<!DOCTYPE html><html lang="en"><head><title>JSON DATA</title><meta charset="utf-8"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script>function prettyPrint() {var ugly = document.getElementById('myTextArea').value;var obj = JSON.parse(ugly);var pretty = JSON.stringify(obj, undefined, 4);document.getElementById('myTextArea').value = pretty;}</script><style>body {padding-top: 50px;background-color:#FFFFF;}</style></head><body><div class="container"><textarea style="width:100%; max-width: 100%; height: 600px" class="form-control" id="myTextArea" name="content" ></textarea><br><button type="button" class="btn btn-info btn-send btn-block" onclick="prettyPrint()">Pretty Print</button></div></body></html>
Références
| Liens | Site |
|---|---|
| jsfiddle | jsfiddle |
| prettify json data in textarea input | stackoverflow |
| Where to place JavaScript in an HTML file? | stackoverflow |
| How to prettyprint a JSON file? | stackoverflow |
| prettify json data in textarea input | stackoverflow |
| HTML button to NOT submit form | stackoverflow |
