如何在JS中以人类可读的格式打印JSON字符串

fwzugrvs  于 2023-05-30  发布在  其他
关注(0)|答案(5)|浏览(167)

我有一个Firebase实时数据库,它可以读取传感器数据(每0. 3秒更新一次),并将其显示在我的网页上。在做了一些研究后,我发现了“漂亮的印刷”。但是,这不是我追求的格式。我现在的数据显示如下:{“水分”:619}。
我要找的是:湿度:619。到目前为止,每当数据库中的值更新时,这段代码也会创建一个新的{“Moisture”:619}。理想的情况是,如果新值被更新,使它只是改变水分后的值,而不是再次显示整个事情。

我的编码:

<!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.com/firebasejs/4.11.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-database.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-storage.js"></script>
    <script src="https://www.gstatic.com/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>
n3schb8v

n3schb8v1#

你可以使用JSON.stringify和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>
l2osamch

l2osamch2#

你可以使用pre标签来显示格式化的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>
drnojrws

drnojrws3#

可以使用正则表达式删除[]{}"”字符:

snapshotJSON.replace(/[\[\]\{\}\"]+/g, '')

但是你已经有了普通的值

snapshot.val()

为什么不用这个呢

JSON.stringify()

将javascript对象转换为JSON格式的字符串-通常用于机器到机器的通信。与之相反的是JSON.parse,它将文本转换为JavaScript对象。

vxbzzdmp

vxbzzdmp4#

你可以使用prettier来样式化你的整个代码。
来源:https://prettier.io
Npm链接:https://www.npmjs.com/package/prettier

polhcujo

polhcujo5#

Human.json

最好的解决方案是json.human。它将JSON数据转换成表格,当然,表格是人类可读的(即使是非技术人员)。最好的部分是open-source

Human.json Git-hub

相关问题