We Keep Coding

JS for loop not working

I have a for loop which looks like this:
for (var i = 0; i < list.length; i++) {
It is looping through Firebase data in the database and returning all the data in the database.
However, I want it to only go up to the first 10 database items. So I changed the loop to:
for (var i = 0; i < 9; i++) {
But this fails to display any results when the there are less than 10 pieces of data in the database. However, if I set the number to however many objects I have in the database, for example 10 because I have 10 objects, it displays them all. But any less than this number and I just get a blank webpage.
Here is the webpage when I have 10 objects in my Firebase database:
And here it is when I remove one of those objects:
I have no idea why this is happening - The logic is correct - if i is less than 9 then display the data - But instead it only displays it when it equals 9.
Here is the full JS:
function refreshUI(list) {
var lis = '';
var lis2 = '';
var lis3 = '';
var lis4 = '';
for (var i = 0; i <= 9; i++) {
lis += '<li data-key="' + list[i].key + '" onclick="addText(event)">' + list[i].book + '</li>';
lis2 += genLinks(list[i].key, list[i].book)
};
for (var i = 10; i < list.length; i++) {
lis3 += '<li data-key="' + list[i].key + '" onclick="addText(event)">' + list[i].book + '</li>';
lis4 += genLinks(list[i].key, list[i].book)
};
document.getElementById('bookList').innerHTML = lis;
document.getElementById('bookList2').innerHTML = lis2;
document.getElementById('bookList3').innerHTML = lis3;
document.getElementById('bookList4').innerHTML = lis4;
};
function genLinks(key, bkName) {
var links = '';
links += '<img src="images/bin.png" style="width: 24px; height: 24px; transform: translateY(-7px); opacity: .4;"></img> ';
return links;
};
function del(key, bkName) {
var response = confirm("Are certain about removing \"" + bkName + "\" from the list?");
if (response == true) {
// build the FB endpoint to the item in movies collection
var deleteBookRef = buildEndPoint(key);
deleteBookRef.remove();
}
}
function buildEndPoint (key) {
return new Firebase('https://project04-167712.firebaseio.com/books/' + key);
}
// this will get fired on inital load as well as when ever there is a change in the data
bookList.on("value", function(snapshot) {
var data = snapshot.val();
var list = [];
for (var key in data) {
if (data.hasOwnProperty(key)) {
book = data[key].book ? data[key].book : '';
if (book.trim().length > 0) {
list.push({
book: book,
key: key
})
}
}
}
// refresh the UI
refreshUI(list);
});
If anybody has any help I'd greatly appreciate it!

When the list size is shorter than 10, you will get an error in the loop because you will eventually address a property (like key) that does not exist on list[i] (since it is undefined). If you would check the console, you would notice that this error is reported.
To fix this, change the condition of the first for loop like this:
for (var i = 0; i < Math.min(10, list.length); i++) {
This way, the loop will never iterate to an entry that does not exist. It will stop after 9 or after list.length-1 whichever comes first.
Alternatively, you can just put the two conditions with an && operator:
for (var i = 0; i < 10 && i < list.length; i++) {

using jQuery to iterate through an array to create links

I am attempting to loop through a very simple array in order to create a menu. I have been all around the solution, but have yet to nail it down.
Here's my script:
var json_data = [["Womens","/womens"],["Best Sellers","/best-sellers"]];
var json_length = json_data.length;
var inner_length = 0;
for (var i = 0; i<json_length; i++)
{
inner_length = json_data[i].length;
for( var j = 0; j<inner_length; j++ ){
var innerData = json_data[i][j];
var data = '' + json_data[j][0] + '<br/>';
//alert(data);
$("#content").append(data);
}
}
Basic HTML:
<div id="content">
</div>
When I move the code to append to my div within the first for loop (rather than the second), the second object's data is shown twice rather than the first then second. The current code shows both the first and second object's data, but duplicates it due to being inside the second for loop. I'm sure there is a simple solution, but I am at a loss of ideas.

You can iterate through the array more easily using forEach():
json_data.forEach(function(item) {
var data = '' + item[0] + '<br/>';
$("#content").append(data);
});
Fiddle

Updated your fiddle, removed the unnecessary loop:
https://jsfiddle.net/79k32o1j/4/
for (var i = 0; i<json_length; i++) {
var data = '' + json_data[i][0] + '<br/>';
$("#content").append(data);
}

Remove all the callbacks from an HTML element with jQuery

I have a select menu that, on change through AJAX, generates another select menu, which in turn on change generates yet another select menu with yet another callback on change (lets say alert(chosenValue)). By working my way through these select menus the first time, I generate correctly the content for the second and third select, and the alert is printed correctly.
From the second time onward, when I generate new content for the third select, when choosing an option, multiple alerts are fired with the elements that were at that position in the select. I am guessing that these callbacks where generated and stayed there, because I generated them with $("select#dropdownMenu3").change(function() {...});.
Is there a way to remove such generated callbacks and have a "virgin" select#dropdownMenu3 again? I'm using jQuery, so big pluses if the solution includes it! Thanks!
EDIT: code becasue - reEDIT: I'm starting to thing that the problem is far more serious. Here is the whole thing
/*All the variables that you see used are defined somewhere up here*/
$("select#dropdownMenu1").change(function(){
$('select#dropdownMenu3').unbind('change');
var typeChosen = $(this).children(":selected").html();
if(!searchSuggestions){
$.get( "/searchdata", function( data ) {
data = JSON.parse(data);
searchSuggestions = data;
for(var i = 0; i < data.length; i++){
if(data[i].type == typeChosen){
$("#dropdownMenu2").empty();
$("#dropdownMenu2").append("<option disabled>Choose a Predicate</option>");
for(var j = 0; j < data[i].predicates.length; j++){
$("#dropdownMenu2").append("<option value='" + j + "'>" + data[i].predicates[j].predicate + "</option>");
}
}
}
$("#dropdownMenu2").select2();
$("select#dropdownMenu2").change(function(){
predicateChosenIndex = parseInt($(this).children(":selected").val());
$("#tdDropdownMenu3").html("");
$('#tdDropdownMenu3').append("<select class=\"js-example-basic-multiple\" id=\"dropdownMenu3\"><option disabled>Choose an Object</option></select>");
for(var i = 0; i < data.length; i++){
if(data[i].type == typeChosen){
for(var k = 0; k < data[i].predicates[predicateChosenIndex].values.length; k++){
$("#dropdownMenu3").append("<option value='" + k + "'>" + data[i].predicates[predicateChosenIndex].values[k].value + "</option>");
}
}
}
$("#dropdownMenu3").select2();
$("select#dropdownMenu3").change(function(){
objectChosenIndex = parseInt($(this).children(":selected").val());
for(var i = 0; i < data.length; i++){
if(data[i].type == typeChosen){
alert(data[i].predicates[predicateChosenIndex].values[objectChosenIndex].value + " chosen");
}
}
});
});
});
}

You can use:
$('select#dropdownMenu3').unbind('change');
But as long as we don't see how you generate your html, this might not be the best solution.

Java Script add value of variable to object property?

I'm new here and to JavaScript. I have an assignment that asks "create a new property in the foodInfo object plus the value of the toppings variable, and set the ne property's value to to value of the current element in the toppingBoxes array."
Here is the code I have that is not working, I have tried multiple things but cant get it to print out the toppings on the page:
for (var i = 0; i < toppingBoxes.length; i++) {
if (toppingBoxes[i].checked) {
toppings = toppings + 1;
foodInfo.topping[toppings] = toppingBoxes[i].value;
}
}
Here is the code the assignment gave me to print it, so this code is correct, but the code above is what I need help with:
foodSummary.innerHTML += "<ul>";
for (var i = 1; i < 6; i++) {
if (foodInfo["topping" + i]) {
foodSummary.innerHTML += "<li>" + foodInfo["topping" + i] + "</li>";
}
}
foodSummary.innerHTML += "</ul>";
I know the code stops running when it hits the line "foodInfo.topping[toppings] = toppingBoxes[i].value;" so I know that is wrong. I am having trouble with the instructions I mentioned above...any help to get this working? Thank you in advance!!

Try this:
var toppings = 0;
for (var i = 0; i < toppingBoxes.length; i++) {
if (toppingBoxes[i].checked) {
toppings = toppings + 1;
foodInfo['toppings' + toppings] = toppingBoxes[i].value;
}
}

two delimiters output formatting javascript

I thought this would be easier, but running into a weird issue.
I want to split the following:
theList = 'firstword:subwordone;subwordtwo;subwordthree;secondword:subwordone;thirdword:subwordone;subwordtwo;';
and have the output be
firstword
subwordone
subwordtwo
subwordthree
secondword
subwordone
thirdword
subwordone
subwordtwo
The caveat is sometimes the list can be
theList = 'subwordone;subwordtwo;subwordthree;subwordfour;'
ie no ':' substrings to print out, and that would look like just
subwordone
subwordtwo
subwordthree
subwordfour
I have tried variations of the following base function, trying recursion, but either get into infinite loops, or undefined output.
function getUl(theList, splitOn){
var r = '<ul>';
var items = theList.split(splitOn);
for(var li in items){
r += ('<li>'+items[li]+'</li>');
}
r += '</ul>';
return r;
}
The above function is just my starting point and obviously doesnt work, just wanted to show what path I am going down, and to be shown the correct path, if this is totally off base.

It seems you need two cases, and the difference between the two is whether there is a : in your string.
if(theList.indexOf(':') == -1){
//Handle the no sublist case
} else {
//Handle the sublist case
}
Starting with the no sublist case, we develop the simple pattern:
var elements = theList.split(';');
for(var i = 0; i < elements.length; i++){
var element = elements[i];
//Add your element to your list
}
Finally, we apply that same pattern to come up with the implementation for the sublist case:
var elements = theList.split(';');
for(var i = 0; i < elements.length; i++){
var element = elements[i];
if(element.indexOf(':') == -1){
//Add your simple element to your list
} else {
var innerElements = element.split(':');
//Add innerElements[0] as your parent element
//Add innerElements[1] as your child element
//Increment i until you hit another element with ':', adding the single elements each increment as child elements.
//Decrement i so it considers the element with the ':' as a parent element.
}
}

Keep track of the current list to add items to, and create a new list when you find a colon in an item:
var baseParent = $('ul'), parent = baseParent;
$.each(theList.split(';'), function(i, e) {
if (e.length) {
var p = e.split(':');
if (p.length > 1) {
baseParent.append($('<li>').append($('<span>').text(p[0])).append(parent = $('<ul>')));
}
parent.append($('<li>').text(p[p.length - 1]));
}
});
Demo: http://jsfiddle.net/Guffa/eWQpR/
Demo for "1;2;3;4;": http://jsfiddle.net/Guffa/eWQpR/2/

There's probably a more elegant solution but this does the trick. (See edit below)
function showLists(text) {
// Build the lists
var lists = {'': []};
for(var i = 0, listKey = ''; i < text.length; i += 2) {
if(text[i + 1] == ':') {
listKey = text[i];
lists[listKey] = [];
} else {
lists[listKey].push(text[i]);
}
}
// Show the lists
for(var listName in lists) {
if(listName) console.log(listName);
for(var j in lists[listName]) {
console.log((listName ? ' ' : '') + lists[listName][j]);
}
}
}
EDIT
Another interesting approach you could take would be to start by breaking it up into sections (assuming text equals one of the examples you gave):
var lists = text.match(/([\w]:)?([\w];)+/g);
Then you have broken down the problem into simpler segments
for(var i = 0; i < lists.length; i++) {
var listParts = lists[i].split(':');
if(listParts.length == 1) {
console.log(listParts[0].split(';').join("\n"));
} else {
console.log(listParts[0]);
console.log(' ' + listParts[1].split(';').join("\n "));
}
}

The following snippet displays the list depending on your requirements
var str = 'subwordone;subwordtwo;subwordthree;';
var a = []; var arr = [];
a = str;
var final = [];
function split_string(a){
var no_colon = true;
for(var i = 0; i < a.length; i++){
if(a[i] == ':'){
no_colon = false;
var temp;
var index = a[i-1];
var rest = a.substring(i+1);
final[index] = split_string(rest);
return a.substring(0, i-2);
}
}
if(no_colon) return a;
}
function display_list(element, index, array) {
$('#results ul').append('<li>'+element+'</li>');
}
var no_colon_string = split_string(a).split(';');
if(no_colon_string){
$('#results').append('<ul><ul>');
}
no_colon_string.forEach(display_list);
console.log(final);
working fiddle here