I have a Firebase realtime database that reads sensor data (updated every 0.3s) and displays it on my webpage. After doing some research I found out about 'pretty-printing'. However, this is not in format I am after. My data right now is displayed like this: {"Moisture":619}.
What I am looking for is: Moisture: 619. As of right now this code is also creating a new {"Moisture":619} every time the value in the database is updated. Ideal would be if the new value is updated, making it so it just changes the value after Moisture, instead of displaying the whole thing again.
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles.css">
<script src=".11.0/firebase-app.js"></script>
<script src=".11.0/firebase-auth.js"></script>
<script src=".11.0/firebase-database.js"></script>
<script src=".11.0/firebase-firestore.js"></script>
<script src=".11.0/firebase-storage.js"></script>
<script src=".11.0/firebase-messaging.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "xx",
authDomain: "xx",
databaseURL: "xx",
projectId: "xx",
storageBucket: "xx",
messagingSenderId: "xx",
appId: "xx"
};
firebase.initializeApp(config);
</script>
<script>
var database = firebase.database();
var ref = firebase.database().ref("plant-patrol/Moisture");
ref.once("value")
.then(function(snapshot) {
var key = snapshot.key; // "plant-patrol"
var childKey = snapshot.child().key; // "Moisture"
});
</script>
<script>
var ref = firebase.database().ref();
ref.on("value", function(snapshot) {
console.log(snapshot.val());
var snapshotJSON = JSON.stringify(snapshot.val());
var moisture = snapshotJSON;
document.write(moisture);
}, function (error) {
console.log("Error: " + error.code);
});
</script>
<script src="/script.js" defer></script>
</head>
</html>
I have a Firebase realtime database that reads sensor data (updated every 0.3s) and displays it on my webpage. After doing some research I found out about 'pretty-printing'. However, this is not in format I am after. My data right now is displayed like this: {"Moisture":619}.
What I am looking for is: Moisture: 619. As of right now this code is also creating a new {"Moisture":619} every time the value in the database is updated. Ideal would be if the new value is updated, making it so it just changes the value after Moisture, instead of displaying the whole thing again.
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles.css">
<script src="https://www.gstatic./firebasejs/4.11.0/firebase-app.js"></script>
<script src="https://www.gstatic./firebasejs/4.11.0/firebase-auth.js"></script>
<script src="https://www.gstatic./firebasejs/4.11.0/firebase-database.js"></script>
<script src="https://www.gstatic./firebasejs/4.11.0/firebase-firestore.js"></script>
<script src="https://www.gstatic./firebasejs/4.11.0/firebase-storage.js"></script>
<script src="https://www.gstatic./firebasejs/4.11.0/firebase-messaging.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "xx",
authDomain: "xx",
databaseURL: "xx",
projectId: "xx",
storageBucket: "xx",
messagingSenderId: "xx",
appId: "xx"
};
firebase.initializeApp(config);
</script>
<script>
var database = firebase.database();
var ref = firebase.database().ref("plant-patrol/Moisture");
ref.once("value")
.then(function(snapshot) {
var key = snapshot.key; // "plant-patrol"
var childKey = snapshot.child().key; // "Moisture"
});
</script>
<script>
var ref = firebase.database().ref();
ref.on("value", function(snapshot) {
console.log(snapshot.val());
var snapshotJSON = JSON.stringify(snapshot.val());
var moisture = snapshotJSON;
document.write(moisture);
}, function (error) {
console.log("Error: " + error.code);
});
</script>
<script src="/script.js" defer></script>
</head>
</html>
- 1 JSON is human readable – Jaromanda X Commented Mar 21, 2020 at 8:41
- You could look at something like npmjs./package/jquery.json-viewer, or to go one step further for getting rid of braces, mas and such, you could convert it to YAML: npmjs./package/json-to-pretty-yaml – CherryDT Commented Mar 21, 2020 at 8:54
5 Answers
Reset to default 1You can use pre tag to display formatted json.
const json = {
id: "1",
employee_name: "Tiger Nixon",
employee_salary: "320800",
employee_age: "61",
profile_image: ""
};
document.getElementById("app").innerHTML = JSON.stringify(json, (key, value) => (value || ''), 4).replace(/"([^"]+)":/g, '$1:'); <div><pre id="app"></pre></div>Human.json
The best solution for you problem would be json.human. It converts JSON data in to tabular from which of course is human readable (even for non-technicle people). And the best part is it open-source.
Human.json Git-hub
You can use JSON.stringify and replace:
const json = {
id: "1",
employee_name: "Tiger Nixon",
employee_salary: "320800",
employee_age: "61",
profile_image: ""
};
document.getElementById("app").innerHTML = JSON.stringify(json, (key, value) => (value || ''), 4).replace(/"([^"]+)":/g, '$1:');
const json = {
id: "1",
employee_name: "Tiger Nixon",
employee_salary: "320800",
employee_age: "61",
profile_image: ""
};
document.getElementById("app").innerHTML = JSON.stringify(json, (key, value) => (value || ''), 4).replace(/"([^"]+)":/g, '$1:'); <div id="app"></div>You can use regex to remove []{}"" characters:
snapshotJSON.replace(/[\[\]\{\}\"]+/g, '')
But you already have the plain value as
snapshot.val()
so why not use this.
JSON.stringify()
converts a javascript object to a JSON formatted string - normally usedfor machine to machine munication. The opposite would be JSON.parse to convert text into a JavaScript object.
You can use prettier for styling your whole code.
Source: https://prettier.io
Npm Link: https://www.npmjs./package/prettier