javascript - How to print JSON String in human readable format in JS

admin管理员组
文章数量:1026989

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>

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>

Share Improve this question edited Mar 21, 2020 at 13:44 halfer 20.4k19 gold badges109 silver badges202 bronze badges asked Mar 21, 2020 at 8:32 Luukv19 331 silver badge6 bronze badges

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

Add a ment |

5 Answers 5

Sorted by: Reset to default 1

You 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

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>

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>

Share Improve this question edited Mar 21, 2020 at 13:44 halfer 20.4k19 gold badges109 silver badges202 bronze badges asked Mar 21, 2020 at 8:32 Luukv19 331 silver badge6 bronze badges

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

Add a ment |

5 Answers 5

Sorted by: Reset to default 1

You 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

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

本文标签： javascriptHow to print JSON String in human readable format in JSStack Overflow

版权声明：本文标题：javascript - How to print JSON String in human readable format in JS - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745659816a2161820.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - How to print JSON String in human readable format in JS - Stack Overflow

5 Answers 5

Human.json

Human.json Git-hub

5 Answers 5

Human.json

Human.json Git-hub

更多相关文章

javascript - How to print JSON String in human readable format in JS - Stack Overflow

发表评论

推荐文章

count - Get post number both in the loop and in the post

javascript - Does node.js provide a real array implementation? - Stack Overflow

javascript - Selection is changed without throwing the selectionchange event inside nested contenteditable - Stack Overflow

javascript - Radio button onoff trigger works only one way - Stack Overflow

javascript - How to force browsers prefetch images in first 6 parallel connections - Stack Overflow

热门文章

javascript - Align Menu.Item to bottom inside a Sider - Stack Overflow

javascript - How to fix TypeError: Cannot read property &#39;push&#39; of undefined - Stack Overflow

node.js - Puppeteer bot works locally but fails to click button Kubernetes - Stack Overflow

javascript - chrome.storage.local.get results in &quot;Undefined&quot; when called - Stack Overflow

annotations - How to annotate custom objects on 4000 images? where each image contains many objects - Stack Overflow

javascript - set combo box width to auto fit it&#39;s longest field option text in ExtJS - Stack Overflow

php - HTML form with two submit buttons and two different actions - Stack Overflow

C# and Javascript code calculations giving different results - Stack Overflow

javascript - nightmare js browsing and parsing multiple sites - Stack Overflow

php - How to apply &#39;add two more posts&#39; to media content?

最新文章

windows设置断电重启开机后自动输入锁屏密码登录

Windows系统设置开机默认开启数字小键盘

Windows11 开机自动同步时间（开机时间不更新问题）

windows配置开机自启动软件或脚本

【Redis】Windows设置Redis为开机自启动

程序员刚毕业，先去大厂镀金还是先去小厂攒经验？

万象2008清空boss账户密码

【Tools】GitBook简明教程

oracle exadata celldisk 闪存盘受损导致性能下降

SDUT 2138 图结构练习——BFSDFS——判断可达性

javascript - Type &#39;undefined&#39; is not assignable to type &#39;menuItemProps[]&#39; - Stack Overflow

javascript - VS 2015 Angular 2 import modules cannot be resolved - Stack Overflow

javascript - Get the JSON objects that are not present in another array - Stack Overflow

javascript - How to dismiss a phonegap notification programmatically - Stack Overflow

c - Solaris 10 make Error code 1 Fatal Error when trying to build python 2.7.16 - Stack Overflow

javascript - How to fix TypeError: Cannot read property 'push' of undefined - Stack Overflow

javascript - chrome.storage.local.get results in "Undefined" when called - Stack Overflow

javascript - set combo box width to auto fit it's longest field option text in ExtJS - Stack Overflow

php - How to apply 'add two more posts' to media content?

javascript - Type 'undefined' is not assignable to type 'menuItemProps[]' - Stack Overflow