javascript - examples - sp google chart

Bucle de JavaScript hace referencia al último número en bucle

Question

Trabajando con la biblioteca de visualización de google, sin embargo, no creo que eso importe aquí.

Tengo una variable llamada data.H with tiene una longitud de 5

Quiero ver eso aquí:

var cols = new Array();
for (var x = 1; x < data.H.length + 1; x++) {
var idx = x - 1;
console.log(idx);
cols.push({
type: ''number'',
label: data.getColumnLabel(idx),
calc: function (dt, row) {
console.log("row: ", row, "Idx: ",idx);
var val = dt.getValue(0, idx); // this is always 5
for (var i = 1, total = 0, cols = dt.getNumberOfColumns(); i < cols; i++) {
total += dt.getValue(row, i);
}
var percent = val / total;
return {v: percent, f: (percent * 100).toFixed(2) + ''%''}; // return value and value
}
});
};
view.setColumns(cols);

El problema es que mi método de cálculo necesita hacer referencia a idx . Sin embargo, idx siempre es 5. Debería ser 1,2,3,4 y 5 en cada ciclo.

¿Que esta pasando aqui? ¿Cómo hago que la función calc haga referencia al número en el momento del ciclo?

Answer 1

Para cuando llame a sus métodos de cálculo, el ciclo ya habrá finalizado y todas las funciones de cálculo mantendrán una referencia a (el mismo) x e idx en su último estado. Necesita introducir otra función / alcance para poder "congelar" cada idx particular. La forma (sintácticamente) más simple es crear una función separada que toma idx como argumento y devuelve otra función.

function createCalcFunction(idx) {
return function (dt, row) {
/* make a local copy */
var localIdx = parseInt(idx, 10);
console.log("row: ", row, "Idx: ",localIdx);
var val = dt.getValue(0, localIdx);
for (var i = 1, total = 0, cols = dt.getNumberOfColumns(); i < cols; i++) {
total += dt.getValue(row, i);
}
var percent = val / total;
return {v: percent, f: (percent * 100).toFixed(2) + ''%''}; // return value and value
}
}
var cols = [];
for (var x = 1; x < data.H.length + 1; x++) {
var idx = x - 1;
console.log(idx);
cols.push({
type: ''number'',
label: data.getColumnLabel(idx),
calc: createCalcFunction(idx);
});
};
view.setColumns(cols);