Fatal编程技术网
  • javascript/
  • Javascript 如何在JS中以可读格式打印JSON字符串

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

javascript json formatting

Javascript 如何在JS中以可读格式打印JSON字符串,javascript,json,firebase-realtime-database,formatting,pretty-print,Javascript,Json,Firebase Realtime Database,Formatting,Pretty Print,我有一个Firebase实时数据库，可以读取传感器数据（每0.3秒更新一次），并将其显示在我的网页上。在做了一些研究之后，我发现了“漂亮的印刷术”。然而，这不是我想要的格式。我现在的数据显示如下：{“湿气”：619} 我要找的是：湿度：619。到目前为止，每次更新数据库中的值时，此代码也会创建一个新的{“weather”：619}。理想的情况是更新新值，使其仅在潮湿后更改值，而不是再次显示整个内容 我的代码： <!DOCTYPE html> <html> <he

我有一个Firebase实时数据库，可以读取传感器数据（每0.3秒更新一次），并将其显示在我的网页上。在做了一些研究之后，我发现了“漂亮的印刷术”。然而，这不是我想要的格式。我现在的数据显示如下：{“湿气”：619}

我要找的是：湿度：619。到目前为止，每次更新数据库中的值时，此代码也会创建一个新的{“weather”：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>


//初始化Firebase
变量配置={
apiKey:“xx”，
authDomain:“xx”，
数据库URL:“xx”，
投影：“xx”，
storageBucket:“xx”，
messagingSenderId:“xx”，
appId:“xx”
};
firebase.initializeApp（配置）；
var database=firebase.database（）；
var ref=firebase.database（）.ref（“工厂巡检/湿度”）；
参考一次（“价值”）
.then（功能（快照）{
var key=snapshot.key；//“工厂巡检”
var childKey=snapshot.child（）.key；//“湿度”
});
var ref=firebase.database（）.ref（）；
参考“值”，功能（快照）{
console.log（snapshot.val（））；
var snapshotJSON=JSON.stringify（snapshot.val（））；
var湿度=快照；
文件。书写（潮湿）；
}，函数（错误）{
日志（“错误：+Error.code”）；
});
您可以使用JSON.stringify并替换：

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”，
员工姓名：“老虎尼克松”，
员工工资：“320800”，
员工年龄：“61岁”，
配置文件_图像：“
};
document.getElementById（“app”）.innerHTML=JSON.stringify（JSON，（键，值）=>（值| | |“”），4.replace（/“（[^“]+）”）：/g，$1:”；
您可以使用pre标记来显示格式化的json

const json={
id:“1”，
员工姓名：“老虎尼克松”，
员工工资：“320800”，
员工年龄：“61岁”，
配置文件_图像：“
};
document.getElementById（“app”）.innerHTML=JSON.stringify（JSON，（键，值）=>（值| | |“”），4.replace（/“（[^“]+）”）：/g，$1:”

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


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


但是你已经有了普通的值


 snapshot.val()


那么为什么不使用这个呢


 JSON.stringify()



将javascript对象转换为JSON格式的字符串-通常用于机器之间的通信。相反的方法是JSON.parse，将文本转换为JavaScript对象。
您可以使用prettier来设计整个代码的样式

资料来源：


Npm链接：
JSON是人类可读的。你可以看看类似的东西，或者更进一步地去掉大括号、逗号等，你可以将其转换为YAML：注意，我们更喜欢这里的技术风格。我们轻轻地劝阻问候，希望你能帮助，谢谢，提前感谢，感谢信，问候，亲切的问候，签名，请你能帮助，闲聊的材料和缩写的txtspk，恳求，你被困多久了，投票建议，元评论等。只需解释你的问题，并展示你已经尝试了什么，你期望什么，实际上发生了什么。