This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 9 years ago.
I have a dc.js program which runs fine when I give separate names to dc groups
var group1 = dateDimension.group().reduceSum(function(d) { return d.dd; });
var group2 = dateDimension.group().reduceSum(function(d) { return d.count; });
but when I do
var groups = {};
var columns = ["dd","count"];
for (var i = 0; i < columns.length; ++i) {
var col = columns[i]
groups[col] = dateDimension.group().reduceSum(function(d) { return d[col]; });
}
it only remembers the last column and replaces other charts with last chart.
How should I solve this issue
The problem here is one that comes up all the time in JavaScript. Your variable "col" is scoped to the function where that for loop lives, and so it's shared by the two anonymous functions passed into the "reduceSum()" function.
The solution is to interpose another function to provide a distinct copy of the column name. (Also, you should not use for ... in to iterate through arrays.)
for (var i = 0; i < columns.length; ++i) {
(function( columnName ) {
group[ columnName ] = dateDimension.group().reduceSum(function(d) { return d[columnName]; });
})( columns[i] );
}
Related
This question already has answers here:
JavaScript, getting value of a td with id name
(8 answers)
Closed 2 years ago.
I wrote some code that is scanning my HTML table, and I want to use it for formatting that table.
var count_rows = document.getElementById("currency_tab").rows.length;
for (i = 0; i <= count_rows; i++ ) {
var count_cells = document.getElementById("currency_tab").rows[i].cells.length;
for (j = 0; j <= count_cells; j++) {
var check_str = document.getElementById("currency_tab").rows[i].cells[j];
/*
console.log(check_str);
console.log(typeof(check_str));
*/
var check = check_str.includes("-")
if(check) {
check_str.style.color = "red";
} else {
check_str.style.color = "green";
}
}
}
js console.log(check_str); is returning not a value of cell but an object e.g. <th>CURRENCY</th>.
I have tried to parse it with check_str.slice but that is forcing me to count a length of chars in object. I hope there is easier method to resolve that.
You can get the text with check_str.textContent
Please refer to the following documentation: Node.textContent
Also, if you are unsure about the properties of an object you can log them with console.dir(check_str).
This question already has answers here:
JSlint: unexpected 'for' [duplicate]
(2 answers)
Closed 7 years ago.
I'm new to JSLint and I'm trying to create function that outputs amount of elements specified in first argument. Normally I would use the for loop but JSLint doesn't like loops and complains about it.
I've searched the web looking for satisfying answer, but the only ones that I've found are with use of new Array or other way of outsmarting JSLint.
So, how to change this code to JSLint-friendly?
function createElements(amount) {
var i;
var elements = [];
for (i = 0; i < amount; i += 1) {
elements.push(document.createElement('div'));
}
return elements;
}
Try this code,
function createElements(amount, document) {
'use strict';
var i = 0;
var elements = [];
while (i < amount) {
i = i + 1;
elements.push(document.createElement('div'));
}
return elements;
}
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 7 years ago.
(This question is related to this and this but answers there haven't helped me figure out what's wrong in my case.)
I am trying to create an array of clickable elements where each element is bound to a separate instance of some object.
I've simplified the real code I'm working on as much as possible for this question here:
//----------
// Setup part
// SomeObject just holds a number
var SomeObject = function(number) {
this.number = number;
this.getNumber = function() {
return this.number;
};
};
// contains SomeObject(1) through SomeObject(9)
var someArrayContainingObjects = [];
for(var i=1; i<=9; i++)
{
someArrayContainingObjects.push(new SomeObject(i));
}
//----------
// Problem part
for(var y=0; y<3; y++)
{
for(var x=0; x<3; x++)
{
var obj = someArrayContainingObjects[y*3 + x]; // Creating new variable in the loop every time explicitly with var statement?
$("body").append(
$("<button />")
.text("Should output ("+obj.getNumber()+")")
.click(function() {
alert(obj.getNumber()); // Will always be 9
})
);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I thought by explicitly using var obj = ... inside the loop I would create a new context/scope/however it's called for each anonymous click() callback function I'm creating – so that when I click one of the objects, the appropriate number of the respective SomeObject is alert()ed and not always the number of the last SomeObject the loop takes from the array.
Could someone please explain to me why this code snippet does not work as expected, and what to change to have the code function correctly?
To create closure scope in JavaScript you need to invoke a function. In JavaScript we can also invoke functions as soon as you declare them. They are called immediately invoked function expressions
This way you can preserve your x and y values in the scope of the IIFE.
for(var y=0; y<3; y++) {
for(var x=0; x<3; x++) {
(function (x, y) {
var obj = someArrayContainingObjects[y * 3 + x]
$("body").append(
$("<button />")
.text("Should output ("+obj.getNumber()+")")
.click(function() {
alert(obj.getNumber())
})
)
}(x, y))
}
}
Working codepen
Also, this is a big problem that people encounter when they try to write JavaScript as if it was a class based language. I would try to look into writing JS from a more functional perspective
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 8 years ago.
guys, really need for your helps. I got some code block as follows:
function readyToSubmit(answerPack, answerArr, len) {
for (var i = 0; i < answerArr.length; i++) {
var questionId = answerArr[i].id;
console.log(questionId);
// below is an database async operation
userStore.getDoc(id).then(function(doc) {
// if I console.log 'answerArr[i]' here, it will be undefined
// I know it's 'cause the 'i' here is answerArr.length, so it would be undefined
// I want my questionId differently, but it is always the last one in the array
// I know it's the closure issue, but don't really know how to handle it.
doc.questionId = questionId; // always the same one
answerPack.push(doc);
});
}
}
So, how can I exactly get what I want in every round, I mean different questionId, not always the last one. Many many thanks, :)
You could so somethink like ,
function readyToSubmit(answerPack, answerArr, len) {
for (var i = 0; i < answerArr.length; i++) {
var questionId = answerArr[i].id;
doasynch(questionId);
}
}
function doasynch(questionId) {
userStore.getDoc(id).then(function (doc) {
doc.questionId = questionId;
answerPack.push(doc);
});
}
Read
How Closure works
Closure inside loop issue
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to create a two dimensional array in JavaScript?
I want to push elements to 2D array,
My code is,
var results = [];
var resultstemp = [];
function bindlinks(aamt,id1) {
resultstemp=results;
imagesArray.push($("#image1").mapster("get"));
if(results.length==0)
{
results.push([id1]);
}
else
{
var ck=0;
var lng=results.length;
for (var i = 0; i < lng; i++) {
if(results[i]==id1)
{
ck=1;
results = jQuery.grep(results, function(value) {
return value != id1;
});
}
}
if(ck==0)
{
results.push(id1);
}
}
I want to push id as well as aamt to array. Here i am pushing only id to array. I am not sure about how to add aamt to second position in 2D array.
Help me please,
Thank you
Change the declaration as follows:
var results = new Array();
and change the push as follows:
results.push([id1,aamt]);
Hope it would help
The logic behind the method to push two separate values in the same array evenly is something like this:
var array = [];
function push(id1, aamt) {
for (var i= 0; i < 10; i++) {
if (i%2 == 0) {
array.push(id1);
}
else {
array.push(aamt);
}
}
}
push(10, 12);
console.log(array); // 10, 12, 10, 12.....
Take note i abstracted the code quite a bit, because for me was not too obvious what the code should have to do, but the principle is simple: use the modulo (%) operator to test if the value is odd or even. If odd add the first value if even add the second value.
Hope it helps.