Develop Reference

Right way to dynamically update table

I am getting data over websocket every 10 seconds and i am updating the cells using this function:
agentStatSocket.onmessage = function (e) {
data = JSON.parse(e.data);
//console.log(typeof(data));
for (var i = 0; i < data.length; i++) {
var inboundTd = '#' + data[i]['id'] + '-inbound';
var outboundTd = '#' + data[i]['id'] + '-outbound';
if (data[i]['inboundCalls'] != 0) {
$(inboundTd).html(data[i]['inboundCalls']);
}
if (data[i]['outboundCalls'] != 0) {
$(outboundTd).html(data[i]['outboundCalls']);
}
}
};
This is working pretty fine. However, I see some lag with the table being updated. Currently, there are only 150 rows in the table. I do not know what will be the latency if rows will become 1000 or more.
I have the following questions:
What is the correct approach to design these kinds of tables in which data is changing very frequently? I am not using any library like react or angular. This is plain jQuery.I am using dataTables
jQuery to enhance table view.

One thing to consider is that, in many cases, accessing an element based on an ID is usually a lot quicker in vanilla javascript compared to jquery.
A simple example of that is:
function jsTest() {
for (let i = 0; i < 1000; i++) {
document.getElementById("js").innerHTML = i;
}
}
function jqueryTest() {
for (let i = 0; i < 1000; i++) {
$("#jquery").html(i);
}
}
function startup() {
console.time("javascript");
jsTest();
console.timeEnd("javascript");
console.time("jquery");
jqueryTest();
console.timeEnd("jquery");
}
// For testing purposes only
window.onload = startup;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Javascript: <div id="js"></div>
Jquery: <div id="jquery"></div>
So, you could try changing your code to:
agentStatSocket.onmessage = function (e) {
data = JSON.parse(e.data);
//console.log(typeof(data));
for (var i = 0; i < data.length; i++) {
//var inboundTd = '#' + data[i]['id'] + '-inbound';
//var outboundTd = '#' + data[i]['id'] + '-outbound';
var inboundTd = data[i]['id'] + '-inbound';
var outboundTd = data[i]['id'] + '-outbound';
if (data[i]['inboundCalls'] != 0) {
//$(inboundTd).html(data[i]['inboundCalls']);
document.getElementById(inboundTd).innerHTML = data[i]['inboundCalls'];
}
if (data[i]['outboundCalls'] != 0) {
//$(outboundTd).html(data[i]['outboundCalls']);
document.getElementById(outboundTd).innerHTML = data[i]['outboundCalls'];
}
}
};
You can still use jquery for the rest of your code, if you wish, but simple updates to elements that can be targeted by ID are usually quicker with vanilla javascript.

How to create a function to be re-used for later within another function

I got this code:
$(document).ready(function(){
$(".nextForm").on('click',(function(){
//check criteria
if(selectedSlots.length < 1 ||$("#positionAppliedFor").get(0).value.length < 1 ||$("#maxAmountOfHours").get(0).value.length < 1){
//error messages and array
var errorForSlots= "<h5>Select at least one availability slot</h5>";
var errorForPosition = "<h5>Enter the position you wish to apply for<h5>";
var errorForHours = "<h5>Enter the amount of hours you would like to work<h5>";
var errors = [];
//add errors to array
if(selectedSlots.length < 1){errors.push(errorForSlots)};
if($("#positionAppliedFor").get(0).value.length < 1){errors.push(errorForPosition)};
if($("#maxAmountOfHours").get(0).value.length < 1){errors.push(errorForHours)};
//create message
var div = "<div id=\"sectionError\">";
if($("#sectionError").length > 0){$("#sectionError").html('')};
$(div).appendTo($(this).get(0).parentNode);
for(var i = 0; i < errors.length; i++){
$(errors[i]).appendTo($("#sectionError"));
console.log(errors[i]);}
$("</div>").appendTo($(this).get(0).parentNode);
} else {
$("#applicationDetails").slideUp();
$("#personalDetails").slideDown();
if($("#sectionError").length > 0){$("#sectionError").remove()};
}
console.log("function finished");
}));
It all works perfectly, however, I am trying to figure out how to create a function for
//create message
var div = "<div id=\"sectionError\">";
if($("#sectionError").length > 0){$("#sectionError").html('')};
$(div).appendTo($(this).get(0).parentNode);
for(var i = 0; i < errors.length; i++){
$(errors[i]).appendTo($("#sectionError"));
console.log(errors[i]);}
$("</div>").appendTo($(this).get(0).parentNode);
I am planning to re-use this for few other sections on my form and rather than copy/paste I would like to get some help on making my code tidier.
I did try:
function myFunction(){
//message code here
}
$(document).ready(function(){
$(".nextForm").on('click',(function(){
//check criteria
...
//add errors
...
//call func
myFunction();
(I also tried this.myFunction();)
...
}));
});
However, that ended up in TypeError and I don't know where to begin...
I am also concerned about the "this" in my message code so I am also not sure how to address that in my new function...
Admitedly I am a newbie at this and I do not exactly understand all the ins and outs, hopefully you will be able to help.
Maybe there is a better way of doing this?
Let me know your thought either way!
Thanks.

I have created a small reusable framework same as how jQuery is doing behind the scene to expose reusable functions. I didn't tested the append function properly,I just explaining how you can create your own reusable plugin to reuse across the project.
You can change the parameters and method name that you want to expose based on your functionality.
Also I would suggest you to move this code to a javascript file as a plugin and drag after the jquery script.
(function (global, $) {
//you can pass the jQuery object in to this IIFE
var DisplayError = function (elementId) {
return new DisplayError.init(elementId);
}
DisplayError.prototype = {
appendError: function (errors) {
var div = "<div id=\"" + this.elementId + " \">";
if ($(this.elementId).length > 0) {
$(this.elementId).html('')
};
$(div).appendTo($(this.elementId).get(0).parentNode);
for (var i = 0; i < errors.length; i++) {
$(errors[i]).appendTo($(this.elementId));
}
$("</div>").appendTo($(this.elementId).get(0).parentNode);
}
};
DisplayError.init = function (elementId) {
var self = this;
self.elementId = elementId;
}
DisplayError.init.prototype = DisplayError.prototype;
global.DisplayError = global.DisplayError = DisplayError;
}(window, jQuery));
You can write the code for clear the html directly in init function to ensure the element is clearing while initialize the instance itself.
You can invoke the method like below ,
var displayError=DisplayError("#sectionError")
displayError.appendError(["errorId"])
or
DisplayError("#sectionError").appendError(["errorId"])
Hope this helps

New Function
function generateMessage(arg1) {
//create message for each section
console.log("generating message");
var div = "<div id=\"sectionError\">";
if ($("#sectionError").length > 0) {
$("#sectionError").html('')
}
;$(div).appendTo($(arg1).parent());
for (var i = 0; i < errors.length; i++) {
$(errors[i]).appendTo($("#sectionError"));
console.log(errors[i]);
}
$("</div>").appendTo($(arg1).parent());
}
Changed old function
$(document).ready(function() {
$("#adbutnext").on('click', (function() {
//check criteria
if (selectedSlots.length < 1 || $("#positionAppliedFor").get(0).value.length < 1 || $("#maxAmountOfHours").get(0).value.length < 1) {
//error messages and array
var errorForSlots = "<h5>Select at least one availability slot</h5>";
var errorForPosition = "<h5>Enter the position you wish to apply for<h5>";
var errorForHours = "<h5>Enter the amount of hours you would like to work<h5>";
errors = [];
//add errors to array
if (selectedSlots.length < 1) {
errors.push(errorForSlots)
}
;if ($("#positionAppliedFor").get(0).value.length < 1) {
errors.push(errorForPosition)
}
;if ($("#maxAmountOfHours").get(0).value.length < 1) {
errors.push(errorForHours)
}
;
generateMessage(this);
} else {
$("#applicationDetails").slideUp();
$("#personalDetails").slideDown();
if ($("#sectionError").length > 0) {
$("#sectionError").remove()
}
;
}
console.log("function finished");
}
));
});

localStorage is not updating edited information

I have problem editing local storage data. I saved Array of Array-list in local storage and it works, or save. However, when i tried to edit, it only edit temporarily and the edited data disappear when i refresh the page and it shows the original data i saved
function editinfo(){
var name = document.getElementById("nameB").value;
var price = document.getElementById("priceB").value;
var quant = document.getElementById("quantityB").value;
var retrieved = window.localStorage.getItem("done");
var pro = JSON.parse(retrieved);
for (i = 0; i < pro.length; ++i){
if(pro[i][0] === name){
pro[i][1]= price
pro[i][2] = quant;
} else{
console.log("There is no such data to edit");
}
}
window.localStorage.setItem("done", JSON.stringify(pro));
}
// I saved information on local storage, I read data from server.
var bevInventory = $.getJSON('http://pub.jamaica-inn.net/fpdb/api.php?username=jorass&password=jorass&action=inventory_get');
function Info(){
var info = [];
bevInventory.done(function(result){
for(i = 0; i < result.payload.length; ++i){
if(result.payload[i].namn != ""){
var makeList = [result.payload[i].namn, result.payload[i].price, result.payload[i].count];
info.push(makeList);
}
}
var xx = window.localStorage.setItem("done", JSON.stringify(info));
})
return info;
}

One solution is to check first, and add data to local storage if it does not exist. Like this
function editinfo() {
var name = 'bob';
var price = 1;
var quant = 2; // loaded dynamically from page.
if (window.localStorage.hasOwnProperty("done")) {
var retrieved = window.localStorage.getItem("done");
var pro = JSON.parse(retrieved);
for(i = 0; i < pro.length; ++i){
if(pro[i][0] === name){
pro[i][1] = price
pro[i][2] = quant;
}
}
} else {
pro = [[name, price, quant]];
}
window.localStorage.setItem("done", JSON.stringify(pro));
}

Your code fails if there is no "done" data initially in localStorage. JSON.parse() parses null (because of no data) and then error occurs on line
pro.length
So it's better to check if it's a first launch and there is no data:
if (!pro) {
pro = [];
}
Example here
After first executing of editinfo() data successfully saves in localStorage.

Getting an infinite loop and can't see why - Javascript

I'm writing a simple little Connect 4 game and I'm running into an infinite loop on one of my functions:
var reds = 0;
var greens = 0;
function checkEmpty(div) {
var empty = false;
var clicked = $(div).attr('id');
console.log(clicked);
var idnum = parseInt(clicked.substr(6));
while (idnum < 43) {
idnum = idnum + 7;
}
console.log("idnum=" + idnum);
while (empty == false) {
for (var i = idnum; i > 0; i - 7) {
idnumStr = idnum.toString();
var checking = $('#square' + idnumStr);
var str = checking.attr('class');
empty = str.includes('empty');
console.log(empty);
var divToFill = checking;
}
}
return divToFill;
}
function addDisc(div) {
if (reds > greens) {
$(div).addClass('green');
greens++;
console.log("greens=" + greens);
} else {
$(div).addClass('red');
reds++;
console.log("reds=" + reds);
};
$(div).removeClass('empty');
}
$(function() {
var i = 1;
//add a numbered id to every game square
$('.game-square').each(function() {
$(this).attr('id', 'square' + i);
i++;
//add an on click event handler to every game square
//onclick functions
$(this).on('click', function() {
var divToFill = checkEmpty(this);
addDisc(divToFill);
})
})
})
Here is a link to the codepen http://codepen.io/Gobias___/pen/xOwNOd
If you click on one of the circles and watch the browser's console, you'll see that it returns true over 3000 times. I can't figure out what I've done that makes it do that. I want the code to stop as soon as it returns empty = true. empty starts out false because I only want the code to run on divs that do not already have class .green or .red.
Where am I going wrong here?

for (var i = idnum; i > 0; i - 7);
You do not change the i.
Do you want to decrement it by 7?
Change your for loop to the one shown below:
for (var i = idnum; i > 0; i -= 7) {
// ...
}
You also do not use loop variable in the loop body. Instead, you use idnum, I think this can be issue.
while (empty == false) {
for (var i = idnum; i > 0; i -= 7) {
idnumStr = i.toString(); // changed to i
var checking = $('#square' + idnumStr);
var str = checking.attr('class');
empty = str.includes('empty');
console.log(empty);
var divToFill = checking;
// and don't forget to stop, when found empty
if (empty) break;
}
}
I add break if empty found, because if we go to next iteration we will override empty variable with smallest i related value.
You can also wrap empty assignment with if (!empty) {empty = ...;} to prevent this override, but I assume you can just break, because:
I want the code to stop as soon as it returns empty = true
Offtop hint:
while (idnum < 43) {
idnum = idnum + 7;
}
can be easy replaced with: idnum = 42 + (idnum%7 || 7)

Change to this:
for (var i = idnum; i > 0; i = i - 7) {
You are not decrementing the i in your for loop

Building on what the others have posted You would want to change the value of empty inside the for loop. because obviously the string still checks the last string in the loop which would always return false.
while(empty==false){
for (var i = idnum; i > 0; i -= 7) {
// your other codes
if (!empty) {
empty = str.includes('empty');
}
}

How to prevent angular to render page until all data will be present?

I have following issue:
I trying to "merge" data from two collections from MongoDB.
Everything looks OK until I try to show some data from second query that came exactly after first one:
$scope.getData = function() {
var pipeline, fromDateRangeStatement, toDateRangeStatement, service, joblist;
service = ($scope.service && $scope.service.value) ? $scope.service.value : {
$exists: true
};
pipeline = $scope.utils.getSessionUsersPipeline($scope.fromDate, $scope.toDate,
$scope.checkedResults, $scope.checkedStatuses, service, $stateParams, $scope.usersLimit);
toApi.post("/users/aggregate", {
pipeline: pipeline
}).success(function(data) {
$scope.users = data.data.result;
for (var i = 0; i < $scope.users.length; i++) {
var path = "/jobs/" + scope.users[i].id + "/sessions";
var user = $scope.users[i]
toApi.get(path).success(function(data) {
user.error = data.data.records[0].exception // this is not shows up in HTML!
console.log(data.data.records[0].exception); // but it can be logged!
})
}
})
};
So, problem is: $scope.users are rendered at my page, while their attribute error is not. Looks like data became rendered before I change attributes for every user in for loop.
How this can be handled?
Thanks

Below are two different solutions
Each of your GET requests is async, so you need to wait for all of them to resolve. You could wrap each request in its own Promise and collect all Promises like so
var promises = [];
for (var i = 0; i < $scope.users.length; i++) {
promises[i] = new Promise(function (resolve, reject) {
var path = "/jobs/" + scope.users[i].id + "/sessions";
var user = $scope.users[i]
toApi.get(path).success(function(data){
user.error = data.data.records[0].exception;
console.log(data.data.records[0].exception);
resolve(user);
})
}
Then use Promise.all() to group all promises together as one Promise and wait for it to resolve.
Promise.all(promises).then(function(users) {
$scope.users = users;
});
Quick example: http://codepen.io/C14L/pen/QNmQoN
Though, a simpler and better solution would be to display the users one after one, as their API calls return
for (var i = 0; i < $scope.users.length; i++) {
var path = "/jobs/" + $scope.users[i].id + "/sessions";
toApi.get(path).success(function (data) {
$scope.users[i].error = data.data.records[0].exception;
$scope.users[i].done = true;
console.log(data.data.records[0].exception);
});
}
Simply add into your template a check for $scope.users[i].done = true and ony show that dataset with ng-show="user.done".

var user = $scope.users[i] only assign the value of $scope.users[i]. so later when you do user.error=..., it is not going to change the $scope. try this:
for (var i = 0; i < $scope.jobs.length; i++) {
var path = "/jobs/" + scope.users[i].id + "/sessions";
toApi.get(path).success(function(data){
$scope.users[i].error = data.data.records[0].exception // this is not shows up in HTML!
console.log(data.data.records[0].exception); // but it can be logged!
})
}

2 elements about handling this :
If you use {{value}} replace this by
<span ng-bind="value"></span>
So you won't see brackets.
Now you want to wait for all your request before changing anything in order to not have partial data displayed. This is easy too :
var promiseArray = [];
for (var i = 0; i < $scope.users.length; i++) {
var path = "/jobs/" + scope.users[i].id + "/sessions";
var user = $scope.users[i]
promiseArray.push(toApi.get(path)).success(function(data){
var result = {i:i, data:data};
return result
});
}
$q.all(promiseArray).then(function success(result){
for(var i=0; i < promiseArray.length;i++){
$scope.users[result.i].error = result.data.data.records[0].exception;
}
});
Bascially i'm waiting for all request to be resvoled before changing any data so this will run in the same angular loop. So the DOM will be only refreshed once and the user won't see any partial results.