Как напечатать JSON Строка в удобочитаемом формате в JS - PullRequest
Новая
       75

Как напечатать JSON Строка в удобочитаемом формате в JS

0 голосов
/ 21 марта 2020

У меня есть база данных Firebase в реальном времени, которая считывает данные датчиков (обновляемые каждые 0,3 с) и отображает их на моей веб-странице. После некоторых исследований я узнал о «красивой печати». Тем не менее, это не в том формате, который я после. Мои данные сейчас отображаются следующим образом: {"Влага": 619}.

Я ищу вот что: Влага: 619. На данный момент этот код также создает новую {"Влажность": 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>

Ответы [ 4 ]

0 голосов
/ 21 марта 2020

Вы можете использовать красивее для оформления всего кода.

Источник: https://prettier.io

Npm Ссылка: https://www.npmjs.com/package/prettier

0 голосов
/ 21 марта 2020

Вы можете использовать предварительный тег для отображения в формате 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:');
0 голосов
/ 21 марта 2020

Вы можете использовать регулярное выражение для удаления [] {} "" символов: 

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

Но у вас уже есть простое значение как 

 snapshot.val()

, так почему бы не использовать это. 

 JSON.stringify()

преобразует объект javascript в форматированную строку JSON - обычно используется для связи между машинами. Противоположностью будет JSON .parse для преобразования текста в JavaScript объект.

0 голосов
/ 21 марта 2020

Вы можете использовать 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",
  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>
...