I am having difficulty with append. I am rebuilding my personal portfolio to dynamically generate the HTML using JavaScript so that I can eventually request the data from a backend api. I have more or less finished it, but I’m having difficulty appending the navigation links to the navigation dropdowns. The function to do this is shown below:
function addNavigation(navData){
var headings = navData['headings']; //an array of strings that matches the keys in the body object
var body = navData['body']; //an object with the keys matching the names of the dropdown, and an array of html strings for each list element
headings.forEach(function(elem){//iterate through the headings to create the dropdown header
$('#dropdown-lists').append(elem); //append the header to the <ul> element
});
//iterate through the body object
for(var key in body){
var current = body[key];//get the current array of strings
var elemToBeAppendedTo = $('#' + key + '-dropdown');//cache the DOM element created above
current.forEach(function(elem){//iterate through the list elements
elemToBeAppendedTo.append(elem);//append the element
});
}
}
An example of the navData object being passed to the function would be this:
{
'body':{
'backend':[
'<li><a href="#section1">Java REST API</a></li>',
'<li><a href="#section3">Ruby Backend</a></li>',
'<li><a href="#section5">spring backend</a></li>'
],
'frontend':[
'<li><a href="#section2">Angular Frontend</a></li>',
'<li><a href="#section6">react frontend</a></li>'
],
'fullstack':[
'<li><a href="#section4">Jquery forntend</a></li>'
]
},
'headings':[
'<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Backend Projects<span class="caret"></span></a><ul id="backend-menu" class="dropdown-menu"></ul></li>',
'<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Frontend Projects<span class="caret"></span></a><ul id="frontend-menu" class="dropdown-menu"></ul></li>',
'<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Fullstack Projects<span class="caret"></span></a><ul id="fullstack-menu" class="dropdown-menu"></ul></li>'
]
}
So the basic idea is that I would iterate through the contents of the headings
array, append those HTML strings to the navbar (this part works btw, i get the three separate dropdowns displaying correctly), then iterate through each array in the body
object and append those <li>
elements to the <ul>
elements already in the navbar.
The dropdown menus get generated, but not the nav links in those dropdowns. What am i doing wrong? Full source is available here.
EDIT: It might be worth noting that the HTML strings that I generated within the other functions appear to be correct. The dropdown menus, which do appear, can be found using their respective ID’s, as r.fn.init{}
in the browser console. I tried adding a unique ID to each of the <li>
elements to see if they could be discovered in the DOM, and they are present. I just don’t know why they are not showing.