Develop Reference

Passing data with circular references to a javascript web worker on Chrome

I am trying to delegate the html rendering of a tree to a web worker. The tree is composed of nodes, each nodes has references to the next, previous and parent nodes.
The data that represents the tree is an array, containing all the root nodes. This array is post to the web worker as is, since the serializer of the web worker is supposed to support circular references.
When there's few nodes, everything goes well.
Using Chrome browser, when the number of nodes reaches a limit, the web worker do not receive anything ; its message's data is simply null. No error appears in the console.
With Firefox, IE and Edge, everything is OK. But I need Chrome to work to.
I tried to simplify my code and make a case test (see the jsFiddle below), and it appears that the problem comes from the circular reference to the next node.
In this case test, with 100 elements everything goes well, with 1000 it doesn't work.
Is there any solution to this problem ?
Is the only solution to change my code to remove circular references ?
HTML:
<p><button id='btn_100'>Test 100</button><button id='btn_1000'>Test 1000</button></p>
Javascript:
var workerCode = "self.onmessage = function(e) { self.postMessage(e.data ? 'ok ' + e.data.length : 'ko : null data'); };",
blob = new Blob([workerCode], {type: 'text/javascript'}),
blobUrl = URL.createObjectURL(blob),
worker = new Worker(blobUrl);
var btn_100 = document.getElementById('btn_100'),
btn_1000 = document.getElementById('btn_1000');
worker.onmessage = function(e) {
var log = document.createElement('p');
log.innerHTML = 'Response: <pre>' + e.data + '</pre>';
document.body.appendChild(log);
};
btn_100.onclick = function() { send(worker, 100); };
btn_1000.onclick = function() { send(worker, 1000); };
function send(w, n) {
var a = [];
for (var i = 0; i < n; i++) {
a.push({});
if (i > 0) a[i - 1].next = a[i];
}
w.postMessage(a);
}
Link to jsFiddle : https://jsfiddle.net/jvr4a50r/

Google has recognized this issue to be a bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=825466
So far, to ensure having no problems, the only solution is to remove circular references in objects.
In this case I followed these steps:
give a unique id to each node
flatten the tree by putting all nodes in a "hasmap", the key is the unique id
in nodes, replace all references to other nodes by the unique id
and of course change all the code that used references to access objects indirectly through the hashmap

Actuallty,shallow copy happen in next property of object with in array. So for removing circular references, you have to do deep copy in next property.
You can remove circular references by updateing the send function in following way.
var a = [];
for (var i = 0; i < n; i++) {
a.push({});
if (i > 0)
a[i - 1].next = JSON.parse(JSON.stringify(a[i]));
}

Make object Object as index of array (Javascript)

I've been using a crossword app from this repo: https://github.com/jweisbeck/Crossword . The problem is that the program uses jquery version 1.6.2 and my whole project uses jquery-3.1.1 version. Particularly, the error arises here:
buildEntries: function() {
var puzzCells = $('#puzzle td'),
light,
$groupedLights,
hasOffset = false,
positionOffset = entryCount - puzz.data[puzz.data.length-1].position; // diff. between total ENTRIES and highest POSITIONS
for (var x=1, p = entryCount; x <= p; ++x) {
var letters = puzz.data[x-1].answer.split('');
for (var i=0; i < entries[x-1].length; ++i) {
light = $(puzzCells +'[data-coords="' + entries[x-1][i] + '"]');
if($(light).empty()){
console.log($(light));
$(light)
.addClass('entry-' + (x-1) + ' position-' + (x-1) )
.append('<input maxlength="1" val="" type="text" tabindex="-1" />');
}
}
}
// Put entry number in first 'light' of each entry, skipping it if already present
console.log(entries);
console.log(puzz.data);
for (var i = 0; i < entryCount; i++) {
$groupedLights = $('.entry-' + i); 
if(!$('.entry-' + i +':eq(0) span').length){
$groupedLights.eq(0)
.append('<span>' + puzz.data[i].position + '</span>');
}
}
util.highlightEntry();
util.highlightClue();
$('.active').eq(0).focus();
$('.active').eq(0).select();
}
The error arises at line with
light = $(puzzCells +'[data-coords="' + entries[x-1][i] + '"]');
The browser shows this error:
Error: Syntax error, unrecognized expression [object Object][data-coords="1,6"]
I believe this is related to the jQuery version. Or maybe the program uses [object Object] as index. Not sure as I am new in jQuery. I tried to use jQuery Migrate, but it didn't help. Also, I tried to use that jQuery 1.6.2, but a web browser could not find jQuery at all as I am using Typescript and had to install jQuery through .d.ts file. Any tips or advises? Thanks in advance

As the title says:
Make object Object as index of array
That is not possible with standard Objects/Arrays, but you can use a Map for that:
let map = new Map(),
key = {id: '##'};
map.set(key, [1,2,3,4,5]);
console.log(map.get(key)); //[1,2,3,4,5]
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

The [object Object] in the string shown in the error is because a jQuery object is being appended to a string to create a selector, which is invalid.
In your code, it's this line causing the problem:
var puzzCells = $('#puzzle td') // holds jQuery object
// later on...
light = $(puzzCells + '[data-coords="' + entries[x-1][i] + '"]');
This is nothing to do with the version of jQuery being used as it's a syntax issue.
To fix this you should use filter() on the puzzCells object, instead of appending it to a selector. Try this:
light = puzzCells.filter('[data-coords="' + entries[x-1][i] + '"]');

You are concatenating an object (puzzCells) and a string. When JavaScript detects an string concatenation tries to convert all the variables to strings before concatenating them. In plain JavaScript, if you do WHATEVEROBJECT.toString() you will receive [object Object], that's why you see an error containing that message.
This is not jQuery version problem, as this happens at the very low level (JavaScript).
puzzCells is a jQuery object, where you can call jQuery methods. In this case you need the filter method, like this:
light = puzzCells.filter('[data-coords="' + entries[x-1][i] + '"]');
Check out more info right here: http://api.jquery.com/filter/

How to get the index value while using ko.utils.arrayForEach

I am using ko.utils.arrayForEach as mentioned below.
ko.utils.arrayForEach(comments , function(comment) {
tmp.push(comment);
});
Here I am getting all the results and they are pushed to tmp. If I want to access the first record alone, how can I modify the above code for retrieving the index.

Since version 3.1.0 released on 14 May 2014, index is passed to all the array functions as the second argument:
ko.utils.arrayForEach(items, function(item, index) {
/* ... */
});

Unfortunately, it's not possible yet. PimTerry added this functionnality on December (see this commit), but it has not be release yet.
Until now; you can do it manually:
for (var i = 0, j = comments.length; i < j; i++) {
// use an anonymous function to keep the same code structure
(function(comment, i) {
tmp.push(comment);
// do what you need with i here
})(comments[i], i);
}
It's exaclty the code used inside ko.utils.arrayForEach. The migration will be very easy once Knockout will be released

Get all files for all .uploadedFiles

Im looking for a javascript/jquery (doesn't matter which way) to collect all the files i've uploaded.
I have the following code, where .afbeelding is the class for a couple of file input fields
var geuploadeAfbeeldingen = $('.afbeeldingen').files;
for (var i = 0; i < geuploadeAfbeeldingen.length; i++) {
}
This somehow doesnt seem to work. When i try document.getElementsByClassName it also doesn't work. The funny thing however is, that document.getElementById seem to work on one input field
Any ideas?

This should do what you want
var files = [],
geuploadeAfbeeldingen = $('.afbeeldingen').each(function(){
for (var i = 0; i < this.files.length; i++){
files.push(this.files[i]);
}
});
You end up with an array (files) that holds each file you have selected through the input elements..
Demo at http://jsfiddle.net/gaby/GJW7Y/1/
If you only want the filenames then change
files.push(this.files[i]);
with
files.push(this.files[i].name);

Try this way :
var geuploadeAfbeeldingen = $('.afbeeldingen');
for (var i = 0; i < geuploadeAfbeeldingen.length; i++) {
alert(geuploadeAfbeeldingen[i].files[0].name);
}
This may help you.
Edit :
$('.afbeeldingen').files is not work and document.getElementById().files is worked because first one return JQuery object( array of objects) and second one return DOM object.The jQuery object (created by the $ method) is a wrapper around a DOM element or a set of DOM elements. The normal properties and methods are not available with JQuery object.

You need to loop through each input element and return the files property.
Something like this is probably the shortest way, using map to iterate through an array:
var geuploadeAfbeeldingen = $('.afbeeldingen').map(function(k, v) { return v.files[0]; }).get();

Issue with jQuery data

I'm struggling a little. I'm attempting to utilize the cool feature of assigning a custom attribute to an element. However it isn't working.
Basically, I'm trying to assign multiple elements to the TR element identifying information in that row. Here is what it looks like:
for (x=0; x< theData.length; x++)
{
// create table row
var selector = "wc_" + wID + "_row_" + x;
oRow = document.createElement("TR");
oRow.setAttribute("id", selector);
tBodyO.appendChild(oRow);
var rowCount = 0;
var identCnt = 0;
for (var index in theData[x])
{
identCnt = 0;
if (hasIdentify)
{
for (y=0; y < theIdent.length; y++)
{
console.log("ROW: "+x+" , checking: "+index+" === "+theIdent[y]["data_name"]);
if (index === theIdent[y]["data_name"])
{
myrow = $("#" + selector);
//myrow.attr("test","works");
console.log("ident Dataname: "+theIdent[y]["data_name"]+ " identify:"+theIdent[y]["identify"]+" value: "+theData[x][index]);
jQuery.data( myrow, "test", { first: 16, last: "pizza!" });
alert(myrow.data("test"));
}
}
}
}
}
I've left out some code that's not really relevant, but I hope you get the picture. What I'm trying to do is this:
I have an array that contains "identity" information about a particular row of data. It can have 0, 1 or more such identity pieces. I want to store these as a custom data attribute on the <TR> element.
Each data will have a distinct key (example: i_0_1 where 0 is the data row number and 1 is the identity counter)
However, I can't get this to work. I've tried lots of alternatives even trying to resort to .attr() with no luck. What am I doing wrong??
I'm getting an alert that says undefined. When I try the myrow.attr("test","works"); route I can see the attribute in the DOM. Why won't the data() way work for me?

I just figured out what the problem is. I guess after reading the docs on jQuery.data() I didn't see anyone really clearly come out and say:
You will not see the data info in the DOM - element when you look at the source.
To the credit of everyone here, they did tell me, I just didn't know what I was reading (now that I know what is expected)
Matt wrote:
"ill not actually set an attribute or property on the element; jQuery stores this data in an internal cache, and merely maps it to the element you selected"
Although after playing around with the .attr() and setAttribute() functions I just became more confused.
Thanks everyone!