Develop Reference

Uncaught TypeError: Cannot read property 'length' of undefined on node.js

How's it going?
I have been trying to put some upvotes functionalities on this web app I have been developing but I am stuck. Please help. The error that it is shown on Chrome's console is:
Uncaught TypeError: Cannot read property 'length' of undefined
at createUpvotesSection ((index):41)
at XMLHttpRequest.ajax.onreadystatechange ((index):343)
But could it be? I have already stated the "createUpvotesSection" and tried to use it in Index.ejs as you can see below:
Index.ejs:
function showNewsfeed() {
var ajax = new XMLHttpRequest();
ajax.open("POST", "/getNewsfeed", true);
ajax.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
var html = "";
for (var a = 0; a < response.data.length; a++) {
var data = response.data[a];
html += '<div class="central-meta item">';
html += '<div class="user-post">';
html += '<div class="friend-info">';
html += '<figure>';
html += '<img src="' + mainURL + "/" + data.user.profileImage + '" style="width: 45px; height: 45px; object-fit: cover;">';
html += '</figure>';
html += '<div class="friend-name">';
html += '<ins>';
if (data.type == "post")
{
html += '<a href="/user/' + data.user.username + '">';
html += data.user.username;
html += '</a>';
}
else
{
html += data.user.name;
}
html += '</ins>';
var createdAt = new Date(data.createdAt);
var date = createdAt.getDate() + "";
date = date.padStart(2, "0") + " de " + months[createdAt.getMonth()] + ", " + createdAt.getFullYear();
html += '<span>Publicado em: ' + date + '</span>';
html += '</div>';
html += '<div class="post-meta">';
html += '<div class="description">';
html += '<p>';
html += data.caption;
html += '</p>';
html += '</div>';
if (data.image != "") {
html += '<img src="' + mainURL + "/" + data.image + '">';
}
if (data.video != "") {
html += '<video style="height: 359px; width: 100%;" controls src="' + mainURL + "/" + data.video + '"></video>';
}
html += createUpvotesSection(data);
html += '</div>';
html += '</div>'
html += '</div>';
html += '</div>';
}
document.getElementById("newsfeed").innerHTML = html;
}
};
Header.ejs (shorter version):
function createUpvotesSection(data) {
var isUpvoted = false;
for (var b = 0; b < data.upvoters.length; b++) {
var upvoter = data.upvoter[b];
if (upvoter._id == window.user._id) {
isUpvoted = true;
break;
}
}
var html = "";
html += '<div class="we-video-info">';
html += '<ul>';
html += '<li>';
var className = "";
if (isUpvoted) {
className = 'upvote';
} else {
className = "none";
}
html += '<span class="' + className +'" onclick="toggleUpvotePost(this);" data-id="' + data._id +'">';
html += '<i class="ti-thumb-up"></i>';
html += '<ins>' + data.upvoters.length + '</ins>';
html += '</span>';
html += '</li>';
html += '<li>';
html += '<span class="comment" title="Comments">';
html += '<i class = "fa fa-comments-o"></i>';
html += '<ins>' + data.comments.length + '</ins>';
html += '</span>';
html += '</li>';
html += '<li>';
html += '<span class="share" onclick="sharePost(this);" data-id="' + data._id +'">';
html += '<i class="ti-share"></i>';
html += '<ins>' + data.shares.length + '</ins>';
html += '</span>';
html += '</li>';
html += '</ul>';
html += '</div>';
return html;
}

According to the error that Cannot read property 'length' of undefined on node.js that means the variable that you try to get length of it is undefined variable. try to define that first before you take the length

To Add New row to dynamic table

In the below code i have dynamic table with dynamic colmnns.I can able to generate table now i want to add new row .As this dynamic table has dynamic id's for each textbox/dropdown/checkbox of the table.So when i click new row it also have dynamic id for each textbox/dropdown/checkbox.Pls help me to do this.
function LoadTableFields(sFieldID, Name, newdiv, FieldValue, TableValues) {
var TblValues = JSON.parse(TableValues);
var tHTML = '';
tHTML += '<table class="table table-bordered table-striped" id="table_' + sFieldID + '" name="' + Name + '"><thead><tr >';
var headers = [];
$.each(TblValues, function(i, item) {
if (headers.indexOf(item.Name) === -1) {
headers.push(item.Name);
tHTML += '<th class="text-center">' + item.Name + '</th>';
}
});
tHTML += '</tr></thead><tbody><tr id="row_0" data-id="0">';
var Count = 0;
$.each(TblValues, function(i, item) {
if (item.FieldType == 'TextBox') {
if (item.Name === headers[0]) {
tHTML += '<tr>';
}
tHTML += '<td data-name=' + item.Name + ' class="col-xs-3 form-group"><input type="text" id=' + item.Name + i + ' name=' + item.Name + i + ' placeholder=' + item.Name + ' class="form-control" value=' + item.FieldValue + ' /></td>';
if (item.Name === headers[headers.length - 1]) {
tHTML += '</tr>';
}
} else if (item.FieldType == 'DropDownList') {
if (item.Name === headers[0]) {
tHTML += '<tr>';
}
var options = LoadTableFieldEnums(sFieldID, item.Name, item.FieldValue);
tHTML += '<td data-name=' + item.Name + ' class="col-xs-3 form-group"><select id=' + item.Name + i + ' name=' + item.Name + i + ' class="form-control">' + options + '</select></td>';
if (item.Name === headers[headers.length - 1]) {
tHTML += '</tr>';
}
} else if (item.FieldType == 'CheckBox') {
tHTML += '<td data-name=' + item.Name + '><input type="checkbox" id=' + item.Name + i + ' name=' + item.Name + i + '/></td>';
} else if (item.FieldType == 'Date') {
if (item.Name === headers[0]) {
tHTML += '<tr>';
}
tHTML += '<td data-name=' + item.Name + ' class="col-xs-3 form-group"><div class="input-group date"><input type="text" class="form-control" id=' + item.Name + '0' + ' name=' + item.Name + '0' + ' /><span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span></div></td>';
if (item.Name === headers[headers.length - 1]) {
tHTML += '</tr>';
}
Count = i;
} else {
tHTML += '<td data-name=' + item.Name + '></td>';
}
});
tHTML += '</tr></tbody></table>';
tHTML += '<a id="add_row_' + sFieldID + '" class="btn btn-default pull-left" onclick="AddNewTableRow(' + sFieldID + ');">Add Row</a><a id="delete_row_' + sFieldID + '" class="pull-right btn btn-default" onclick="DeleteTableRow(' + sFieldID + ');">Delete Row</a>';
newdiv.innerHTML += tHTML;
$('#divComplete').append(newdiv);
}
function AddNewTableRow(sFieldID) {
// Dynamic Rows Code
// Get max row id and set new id
var newid = 0;
$.each($("#table_" + sFieldID + " tr"), function() {
if (parseInt($(this).data("id")) > newid) {
newid = parseInt($(this).data("id"));
}
});
newid++;
var tr = $("<tr></tr>", {
id: "row_" + newid,
"data-id": newid
});
// loop through each td and create new elements with name of newid
$.each($("#table_" + sFieldID + " tbody tr:nth(0) td"), function() {
var cur_td = $(this);
var children = cur_td.children();
// add new td and element if it has a nane
if ($(this).data("name") != undefined) {
var td = $("<td></td>", {
"data-name": $(cur_td).data("name")
});
// Date control
if ($(children[0]).prop('tagName') == 'DIV') {
var strname = $(cur_td).data("name");
var c = $('<div class="input-group date"><input type="text" class="form-control" id=' + strname + '' + newid + ' name=' + strname + '' + newid + ' /><span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span></div>');
c.appendTo($(td));
} else {
var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
c.attr("name", $(cur_td).data("name") + newid);
c.attr("id", $(cur_td).data("name") + newid);
c.appendTo($(td));
}
td.appendTo($(tr));
} else {
var td = $("<td></td>", {
'text': $('#table_' + sFieldID + ' tr').length
}).appendTo($(tr));
}
});
// add the new row
$(tr).appendTo($('#table_' + sFieldID));
}
function DeleteTableRow(sFieldID) {
var newid = 0;
$.each($("#table_" + sFieldID + " tr"), function() {
if (parseInt($(this).data("id")) > newid) {
newid = parseInt($(this).data("id"));
}
});
if (newid != 0) {
$("#row_" + (newid)).remove();
}
}

Fill table in javascript with data from db

I have an html <table> that I need to fill with data from a database query. The query returns 10 rows and then sends the data to the method fill(data) to fill the table:
function getTopQ() {
alert("Get top Qs");
callServer('fill', 'checkConnection', false, 'SelectTopQues.php');
}
function fill(data) {
alert("ready to fill now");
$('#table').html('');
var search = '#table';
for (var i = 0; i < data.length; i++) {
$('#table').listview("refresh");
var Questions = data[i];
var str = '<td " ID="' + Questions[0] +
'" Question="' + Questions[1] +
'" UserID="' + Questions[2] +
'"CategoryId"' + '" SubCategoryId"' + '" DatePosted"' + '"';
str += '">'; //end li
str += '<a href="" data-transition="fade">';
str += Questions[1];
str += '</a>';
//str += '<span class="hiddenData">' + item[13] + '</span>';
str += '</td>';
$('#table').append(str);
$('#table').listview("refresh");
}
console.log(data);
console.log($('#table'));
$('#table').listview("refresh");
}

JavaScript error with XML when trying to read empty node

I am trying to render a catalog from an XML document and everything works, although when trying to show a default image if there is no image present in the XML node, it disables the parent node therefore forcing it not to show any of it and it reads me an error in my console saying:
Uncaught TypeError: Cannot read property 'getElementsByTagName' of
undefined
Which is pointing to this part of the code:
if (records[i].getElementsByTagName("IMAGE")[0].childNodes.length > 0)
{
So my question is where in my code below is my error causing it to not load the XML node?
PS: If anybody needs more of my code please let me know, and I would be happy to post it.
for (var i = fromItem; i < nextMaxItem; i++) {
if (records[i].getElementsByTagName("IMAGE")[0].childNodes.length > 0) {
xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
+ '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">'
+ '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="'+ records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue +'">'
+ '<img class="product-image" src="' + records[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue + '" alt="' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '" />'
+ '<div class="caption">'
+ '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
+ '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
+ '</div>'
+ "</a></div></div></article>";
} else {
xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
+ '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">'
+ '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="'+ records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue +'">'
+ '<img class="product-image" src="/images/Products/no-preview.jpg" alt="No Preview Available" />'
+ '<div class="caption">'
+ '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
+ '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
+ '</div>'
+ "</a></div></div></article>";
}
}
Here is the whole JavaScript code:
var page = 1, perPage = 12, content = document.getElementById('content'),
pagination = document.getElementById('pagination'), records;
function paganation(page) {
var nextMaxItem = perPage * page,
fromItem = (page - 1) * perPage,
maxPages = Math.ceil(records.length / perPage);
var xmlContent = '<div class="row">';
for (var i = fromItem; i < nextMaxItem; i++) {
if (records[i].getElementsByTagName("IMAGE")[0].childNodes.length > 0) {
xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
+ '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">'
+ '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '">'
+ '<img class="product-image" src="' + records[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue + '" alt="' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '" />'
+ '<div class="caption">'
+ '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
+ '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
+ '</div>'
+ "</a></div></div></article>";
} else {
xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
+ '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">'
+ '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '">'
+ '<img class="product-image" src="/images/Products/no-preview.jpg" alt="No Preview Available" />'
+ '<div class="caption">'
+ '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
+ '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
+ '</div>'
+ "</a></div></div></article>";
}
}
xmlContent += "</div>";
content.innerHTML = xmlContent;
var paginationContent = '<nav><ul class="pagination">';
if (page > 1) {
paginationContent += '<li>';
paginationContent += '<span aria-hidden="true">«</span>';
paginationContent += '</li>';
} else {
paginationContent += '<li class="disabled">';
paginationContent += '<span aria-hidden="true">«</span>';
paginationContent += '</li>'
}
var prevPosition = page - 3;
var nextPosition = page + 3;
for (var i = 1; i <= maxPages; i++) {
if (i != page) {
if (i >= prevPosition && i <= nextPosition) {
var linkToPage = i == prevPosition ? 1 : i == nextPosition ? maxPages : i;
var linkText = i == prevPosition ? "..." : i == nextPosition ? "..." : i;
paginationContent += "<li>";
paginationContent += '' + linkText + '';
paginationContent += "</li>";
}
} else {
paginationContent += "<li class='active'>";
paginationContent += '' + i + '';
paginationContent += "</li>";
}
}
var next = page + 1;
if (next <= maxPages) {
paginationContent += '<li>';
paginationContent += '<span aria-hidden="true">»</span>';
paginationContent += '</li>';
} else {
paginationContent += '<li class="disabled">';
paginationContent += '<span aria-hidden="true">»</span>';
paginationContent += '</li>';
}
paginationContent += '</ul></nav>';
pagination.innerHTML = paginationContent;
}
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", xmlUrl, false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
records = xmlDoc.getElementsByTagName(xmlNode);
records = Array.prototype.slice.call(records).sort(function () {
return Math.random() > 0.5 ? 1 : -1
});
paganation(1);

If we imagine that records was of length 18, then for the second page, you would have:
fromItem - 12
nextMaxItem - 24
You are iterating i from fromItem to nextMaxItem, but as soon as you go past i = 18, you've gone past the end of records. You need to make sure that doesn't happen. You need to ensure that you don't iterate past the end of your array:
var max = Math.min(nextMaxItem, records.length);
for (var i = fromItem; i < max; i++) {
....
}

Need help with Flickr/JSON/Javascript issue when displaying gallery images

Wondering if anyone can help me. I'm trying to put together a weekly photo competition page by pulling in photos from a Flickr gallery, but I can't get the images to display. It works OK for groups, but having some problems with the gallery code. Getting the correct JSON response, but can't get the results to display on the page as good as the group images do.
Here's my Javascript:
$(function() {
var map;
var markers = [];
var infowindow;
// Get gallery photos
var visibleGallery;
$.getJSON("http://api.flickr.com/services/rest/" +
"?method=flickr.galleries.getPhotos" +
"&api_key=XXXX" +
"&photoset_id=XXXX" +
"&extras=geo,tags,url_sq,url_t,url_s,url_m,url_o" +
"&format=json&jsoncallback=?", function(data, textStatus) {
var htmlString = '<div id="weekContainer">';
var weeks = sortIntoWeekArrays(data.photos.photo);
$.each(weeks, function(i, week)
{
var weekNumber = i + 1;
var numberOfWeeks = weeks.length - 1;
htmlString += '<div id="week' + weekNumber + '">';
htmlString += '<ul class="weeks">';
if(i < numberOfWeeks)
{
htmlString += '<li><a class="weekLinksNext" href="#"><span>Next</span></a></li>';
}
var sunday = new Date(week.monday.toUTCString());
sunday.setDate(week.monday.getDate() + 6);
htmlString += '<li class="weekTitle">Week ' + weekNumber + ':</li><li class="weekDate"> ' + week.monday.format("ddd d mmm") + ' — ' + sunday.format("ddd d mmm") + '</li>';
if(i > 0)
{
htmlString += '<li><a class="weekLinksPrev" href="#"><span>Previous</span></a></li>';
}
htmlString += '</ul>';
if(week.winner !== undefined)
{
htmlString += '<p class="galleryTitleFirst">Photo of the Week</p>';
htmlString += '<ul class="imagesWinners">';
htmlString += '<li class="winner"><a href="http://www.flickr.com/photos/' + week.winner.owner + '/' + week.winner.id + '" target="_blank">';
htmlString += '<img title="' + week.winner.title + '" src="' + week.winner.url_m + '" alt="' + week.winner.title + '" />';
htmlString += '</a></li>';
htmlString += '<li class="name">' + week.winner.title + '</li>';
htmlString += '<li class="owner">' + 'by ' + week.winner.ownername + '</li>';
htmlString += '</ul>';
}
htmlString += '<p class="galleryTitle">Our other favourites this week</p>';
htmlString += '<ul class="imagesRunnersUp">';
$.each(week.images, function(i, item)
{
htmlString += '<li><a href="http://www.flickr.com/photos/' + item.owner + '/' + item.id + '" target="_blank">';
htmlString += '<img title="' + item.title + '" src="' + item.url_sq + '" alt="' + item.title + '" />';
htmlString += '</a></li>';
if(item.longitude == "0" && item.latitude == "0")
{
return true;
}
var latlng = new google.maps.LatLng(item.latitude, item.longitude);
var marker = new google.maps.Marker(
{
position: latlng,
map: map,
title:item.title
});
marker.content = '<img title="' + item.title + '" src="' + item.url_s + '" alt="' + item.title + '" />';
markers.push(marker);
});
htmlString += '</ul>';
htmlString += '</div>';
});
htmlString += '</div>';
$('div#weekViewer').append(htmlString);
$('div#weekContainer > div').css('float', 'left').css('margin-right', '30px');
$('div#weekContainer').width(weeks.length * 450);
$('div#weekContainer .weekLinksPrev')
.click(function(){
$('div#weekViewer').animate({scrollLeft: '-=450'}, 'slow');
return false;
});
$('div#weekContainer .weekLinksNext')
.click(function(){
$('div#weekViewer').animate({scrollLeft: '+=450'}, 'slow');
return false;
});
});
});
function sortIntoWeekArrays(items)
{
var weeks = [];
// Returns single dimension array containing single dimension arrays
$(items).each(function(i, item)
{
var monday = new Date(item.dateadded * 1000);
monday.setDate(monday.getDate() - monday.getDay() + 1);
monday.setHours(0,0,0,0);
var week, thisWeek;
for (i in weeks)
{
week = weeks[i];
if(week.monday - monday == 0)
{
thisWeek = week;
break;
}
}
if(thisWeek === undefined)
{
thisWeek =
{
monday: monday,
images: []
};
weeks.push(thisWeek);
}
if($.inArray('winner', item.tags.split(" ")) > -1)
{
thisWeek.winner = item;
}
else
{
thisWeek.images.push(item);
}
});
return weeks.sort(function(first, second)
{
return (first.monday > second.monday) - (first.monday < second.monday);
});
}
Any help would be fantastic :)
Regards,
David

Worked it out after some help from a friend. I was missing the date_upload value in the extras argument and item.dateadded needed to change to item.upload.