JSON: Data not showing in web page

Question

Firstly, I would like to say that I am new to javascript, jquery, JSON and most of my learning has been through the microsoft site, w3schools site, and Stack Overflow.

The issue at hand is I am pulling data from a web-api, but the data isn't showing in the web page. I know the data is there as it shows in the google inspect as well as when I step through the code in the editor.

The error being returned now is "blank2.html:241 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'".

Below the code:

    function menu(activemenu, roleid) {

    var myul = document.createElement("ul");
    myul.setAttribute("class", "nav nav-pills nav-sidebar flex-column");
    myul.setAttribute("data-widget", "treeview");
    myul.setAttribute("role", "menu");
    myul.setAttribute("data-accordion", "false");
    var uri = 'api/menu';
    $.getJSON(uri)
        .done(function (data) {
            $('#sidemenu').empty();
            $.each(data, function (key, item) {
                var myli = document.createElement("li");
                var n = String(item.roleid);
                var x = n.search(String(roleid));
                if (x > -1) {
                    if (activemenu == item.pagename) {
                        myli.setAttribute("class", "nav-item nav-link active");
                    } else {
                        myli.setAttribute("class", "nav-item nav-link");
                    }
                    var myi = document.createElement("i");
                    myi.setAttribute("class", "nav-icon " + item.icon);
                    myli.appendChild(myi);
                    var myp = document.createElement("p");
                    myp.setAttribute("onclick", 'menu("' + item.pagename + "," + roleid + '")');
                    myp.innerHTML = item.name + '<i class="right fa fa-angle-left"></i>';
                    myli.appendChild(myp);
                    myul.appendChild(myli);
                }
            });
            return myul;
        });

}

This is the calling code

document.getElementById("sidemenu").appendChild(menu("",8));

Edit Update: I have managed to get the error code to stop showing but the elements are still not showing. Here is the portion of html that should be receiving the elements.

<div id="sidemenu" class="sidebar">
                <!-- Sidebar user (optional) -->
                <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                    <div class="image">
                        <img src="dist/img/vader.jpg" class="img-circle elevation-2" alt="User Image">
                    </div>
                    <div class="info">
                        <a href="#" class="d-block">Vader</a>
                    </div>
                </div>

            </div>

According the screenshot below the code is running and returning the elements to the sidemenu div but they are showing. I thought it might have been caused by the static div within the sidemenu div so I removed it and tried again and got the same results. I even cleared my browsing data just to make sure but still getting same scenario. My hat is off to you web developers.

Screenshot showing the elements

Edit 2: I have come to the conclusion it is in my call to the web api or the loop itself that is causing the issue. If I comment out the code like so

function menu(activemenu, roleid) {

    var myul = document.createElement("ul");
    var mynav = document.createElement("nav");
    myul.setAttribute("class", "nav nav-pills nav-sidebar flex-column");
    myul.setAttribute("data-widget", "treeview");
    myul.setAttribute("role", "menu");
    myul.setAttribute("data-accordion", "false");
    mynav.setAttribute("class", "mt-2");
    //
    //var uri = 'api/menu';
    //$.getJSON(uri)
    //    .done(function (data) {
    //        $('#sidemenu').empty();
    //        $.each(data, function (key, item) {
                var myli = document.createElement("li");
                //var n = String(item.roleid);
                //var x = n.search(String(roleid));
                //if (x > -1) {
                //    if (activemenu == item.pagename) {
                //        myli.setAttribute("class", "nav-item nav-link active");
                //    } else {
                        myli.setAttribute("class", "nav-item nav-link");
                //    }
                    var myi = document.createElement("i");
                    myi.setAttribute("class", "nav-icon fa fa-gear"); // + item.icon);
                    myli.appendChild(myi);
                    var myp = document.createElement("p");
                    myp.setAttribute("onclick", 'menu("' + "item.pagename" + '","' + roleid + '")');
    myp.innerHTML = "This Page"; //item.name; // + '<i class="right fa fa-angle-left"></i>';
                    myli.appendChild(myp);
                    myul.appendChild(myli);
                //}
    //        });
    //        //return myul;
            mynav.appendChild(myul);
    //        console.log(mynav);
    //    });
    return mynav;
}

I will get a menuitem to show up on the page. Time to play the uncomment game until I find the real issue.

Mangesh Auti · Accepted Answer · 2020-03-02 08:37:05Z

0

I tried your code and its run fine . check In Html sidemenu div is there. or cross-check with this answer.

function myfun() {
document.getElementById("sidemenu").appendChild(menu("",1));
}

function menu(activemenu, roleid) {
	
    var myul = document.createElement("ul");
    myul.setAttribute("class", "nav nav-pills nav-sidebar flex-column");
    myul.setAttribute("data-widget", "treeview");
    myul.setAttribute("role", "menu");
    myul.setAttribute("data-accordion", "false");
    //var uri = 'api/menu';
    //$.getJSON(uri)
       // .done(function (data) {
	   var data={"item":{"roleid":"1","pagename":"a1","name":"n1","icon":"i1.ico"}};
            $('#sidemenu').empty();
            $.each(data, function (key, item) {
                var myli = document.createElement("li");
                var n = String(item.roleid);
                var x = n.search(String(roleid));
                if (x > -1) {
                    if (activemenu == item.pagename) {
                        myli.setAttribute("class", "nav-item nav-link active");
                    } else {
                        myli.setAttribute("class", "nav-item nav-link");
                    }
                    var myi = document.createElement("i");
                    myi.setAttribute("class", "nav-icon " + item.icon);
                    myli.appendChild(myi);
                    var myp = document.createElement("p");
                    myp.setAttribute("onclick", 'menu("' + item.pagename + "," + roleid + '")');
                    myp.innerHTML = item.name + '<i class="right fa fa-angle-left"></i>';
                    myli.appendChild(myp);
                    myul.appendChild(myli);
                }
            });
            return myul;
       // });
		}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="myfun()">Click</button>
<div id="sidemenu" name="sidemenu"></div>

answered Mar 2, 2020 at 8:37

Mangesh Auti

1,1451 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dale Rekow Over a year ago

Thank you for the comment @mangesh-auti I have edited my post to show what is going on with this now. I use the same type of code to produce the cards in the content view and they are showing up so this has baffled me.

Dale Rekow Over a year ago

Your answer provided the necessary direction for me to go to make this work. Instead of creating a second function to call the function I was having issues with I inserted the element I am loading in the function I was having issues with. Thank you @mangesh-auti

Collectives™ on Stack Overflow

JSON: Data not showing in web page

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related