How to show firebase query results on html as a list?

Question

I'm developing a js, html & firebase webapp.

I'm trying to get list of scores from firebase and show them on html.

I think my query is working, but I can't show the results on html.

I tried first a code which worked on a video but it did not work for me (https://www.youtube.com/watch?v=NcewaPfFR6Y)

(html)

    <p>
        <ol id ="scorelist">
        </ol>
    </p>

(js)

function gotData(data) {
    var scores = data.val();
    var keys = Object.keys(scores);
    for (var i = 0; i < keys.length; i++) {
        var k = keys[i];
        var score = scores[k].score;
        var li = createElement('li', score);
        li.parent('scorelist');
    }
}

I get error createElement is not defined. When I try document.createElement then li.parent('scorelist') does not work and I get error li.parent is not a function.

Then I tried something like this but it did not work out either.

var scorelist = document.querySelector('#scoreslist')

function gotData(data) {
    var scores = data.val();
    var keys = Object.keys(scores);
    for (var i = 0; i < keys.length; i++) {
        var k = keys[i];
        var score = scores[k].score;
        var li = document.createElement('li', score);
        scorelist = li.textContent;
    }
}

I've been really stuck with this one! I would be grateful for some help, thanks!

You seem to have a lot of little, incremental problems, which makes it hard to help with. 1) `createElement` should be `document.createElement`, as `createElement` is a method on the global `document` object. 2) That you then get an error on `li.parent('scorelist')` is likely because `parent()` doesn't take a parameter as far as I know. You might be confusing `Element.parent()` with jQuery's `parent` function, which does take such an argument: https://api.jquery.com/parent/ — Frank van Puffelen, Aug 11 '21 at 20:49

score 2 · Accepted Answer · answered Aug 11 '21 at 21:06

I added an example with comments that may explain to you what i did.

function gotData() {
      // you had typo on the id, make sure you select the correct element.
      const scorelist = document.querySelector("#scorelist");
    
      var scores = { first: { score: 1 }, second: { score: 2 } };
      var keys = Object.keys(scores);
    
      for (var i = 0; i < keys.length; i++) {
        var k = keys[i];
        var score = scores[k].score;
        // first, create the element
        const newListItem = document.createElement("li", score);
        // and then, set the score as textContent of the newListitem.
        newListItem.textContent = score;
        // finally you should add the newListItem to the list parent element.
        scorelist.appendChild(newListItem);
      }
    }

Nick Dong · Answer 2 · 2021-09-01T04:18:51.480

If you find problems, there might be input errors, built-in function problems, library api problems, algorithm problems, logic problems, etc. Try to read documents and find solutions for each possible problem.

method 1 Not use JQuery:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div>
            If correct, list values will show below:
            <p>
                <ol id ="scorelist">
                </ol>
            </p>
        </div>
        <script>
            function gotData() {
                
                var scorelist = document.querySelector("#scorelist");
                
                var scores = { first: { score: 660 }, second: { score: 330 } };
                var keys = Object.keys(scores);      
                
                for (var i = 0; i < keys.length; i++) {
                    var k = keys[i];
                    var score = scores[k].score;
                    var li = document.createElement("li");
                    li.innerHTML = score;
                    scorelist.appendChild(li);
                }
            }
            //call the function
            gotData();        
        </script>
        <br>
        <br>
        The rest of the body
    </body>
</html>

method 2 JQuery:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    </head>
    <body>
        <div>
            If correct, list values will show below:
            <p>
                <ol id ="scorelist">
                </ol>
            </p>
        </div>
    
        <script>
            function gotData() {

                var scorelist = $("#scorelist");
                
                var scores = '{ "first": { "score": 660 }, "second": { "score": 330 } }';
                var objkeys = $.parseJSON(scores);  
          
                    $.each(objkeys, function( key, value ) {
                        $.each(value, function(key, value){
                        li = $("<li/>");
                        li.css("color", "blue").text(value).appendTo(scorelist);
                    });
                });   
            }
            //call the function
            gotData();
        </script>
        <br>
        <br>
        The rest of the body
    </body>
</html>

Docs: createElement 1 2, querySelector, Object.keys 1 2, selector, append, parent.

Also search your errors in stackoverflow. say get error createElement is not defined. see articles like jquery-document-createelement-equivalent, creating-a-div-element-in-jquery. And test result in websites, like jsfiddle

How to show firebase query results on html as a list?

2 Answers2