How to convert a javascript object to user presentation?

Question

I need to present the results of a firebase query to the user. To perform tests, debug code manually and check conditions, we usually use some function such as console.log, Alert, json returns, array, etc., during development. But at some point, the data of these queries will have to be presented on the screen to the user, and the last thing we want is for them to see some data structure tree with keys, brackets, etc.

In my specific case, I am using firebase, and using the documentation codes.

  <script type="text/javascript">
    var db = firebase.firestore();

    var docRef = db.collection("cities").doc("SF");

    docRef.get().then(function(doc) {
        if (doc.exists) {
            console.log("Document data:", doc.data());
        } else {
            // doc.data() will be undefined in this case
            console.log("No such document!");
        }
    }).catch(function(error) {
        console.log("Error getting document:", error);
    });




    var citiesRef = db.collection("cities");

    var query = citiesRef.where("state", "==", "CA");

    </script>

The question is how I take data from these objects (docRef and query) and present it in a user-friendly way.

Answer 1

There are some libraries specialized in this, take a look at: https://json2html.com

There’s a new feature in Chrome that can also help, called console.table(), that displays a stylized table with information on the console