How to convert a javascript object to a user presentation?

I need to display the results of a firebase query for 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 from those queries will have to be presented on the screen to the user, and the last thing we want is for him to see some data structure tree with braces, brackets, etc.

In my specific case, I'm using the 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 do I get data from these objects (docRef and query) and present it in a user friendly way.