Странное поведение push массива javascript - PullRequest
Новая
       11

Странное поведение push массива javascript

0 голосов
/ 16 мая 2018

Я написал простой код для обработки результата запроса в двумерном массиве (матрице) для таблицы данных Google. Я схожу с ума по этому странному поведению array.push: когда я нажимаю новую строку в матрице, этот метод добавляет строку, но также изменяет значение всех предыдущих строк!

это код: 

<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script type="text/javascript">

запрос - это матрица из запроса 

var qry = [[{label:'Montly', type: 'string'}, {label:'Model', type: 'string'}, {label:'total', type: 'number'}], ['12-2017','California T',parseFloat(13+13)], ['12-2017','458 Speciale',parseFloat(3+2)], ['12-2017','GTC4Lusso',parseFloat(2+6)], ['12-2017','458 Spider',parseFloat(0+1)], ['12-2017','GTC4Lusso T',parseFloat(2+0)], ['12-2017','California',parseFloat(0+2)], ['12-2017','488 Spider',parseFloat(16+7)], ['12-2017','FF',parseFloat(1+3)], ['12-2017','488 GTB',parseFloat(17+10)], ['12-2017','F12berlinetta',parseFloat(3+4)], ['12-2017','458 Italia',parseFloat(0+3)], ['12-2017','F12tdf',parseFloat(1+21)], ['12-2017','LaFerrari Aperta',parseFloat(0+1)], ['12-2017','812 Superfast',parseFloat(2+3)], ['12-2017','Portofino',parseFloat(1+1)], ['11-2017','458 Spider',parseFloat(2+4)], ['11-2017','GTC4Lusso',parseFloat(4+34)], ['11-2017','California T',parseFloat(8+15)], ['11-2017','488 GTB',parseFloat(9+12)], ['11-2017','LaFerrari',parseFloat(0+1)], ['11-2017','458 Speciale',parseFloat(2+2)], ['11-2017','GTC4Lusso T',parseFloat(0+1)], ['11-2017','FF',parseFloat(1+4)], ['11-2017','812 Superfast',parseFloat(3+1)], ['11-2017','California',parseFloat(0+3)], ['11-2017','488 Spider',parseFloat(11+8)], ['11-2017','458 Italia',parseFloat(1+5)], ['11-2017','F12tdf',parseFloat(0+1)], ['11-2017','Portofino',parseFloat(0+1)], ['11-2017','F12berlinetta',parseFloat(3+4)], ['10-2017','458 Italia',parseFloat(0+4)], ['10-2017','California T',parseFloat(9+18)], ['10-2017','California',parseFloat(0+8)], ['10-2017','812 Superfast',parseFloat(1+2)], ['10-2017','F12tdf',parseFloat(1+2)], ['10-2017','Portofino',parseFloat(2+0)], ['10-2017','488 GTB',parseFloat(8+14)], ['10-2017','FF',parseFloat(0+3)], ['10-2017','458 Spider',parseFloat(1+3)], ['10-2017','LaFerrari Aperta',parseFloat(0+1)], ['10-2017','F12berlinetta',parseFloat(5+8)], ['10-2017','458 Speciale',parseFloat(3+2)], ['10-2017','488 Spider',parseFloat(9+7)], ['10-2017','GTC4Lusso',parseFloat(2+4)], ['9-2017','California',parseFloat(0+4)], ['9-2017','458 Speciale Aperta',parseFloat(1+0)], ['9-2017','FF',parseFloat(3+6)], ['9-2017','812 Superfast',parseFloat(2+1)], ['9-2017','458 Italia',parseFloat(1+3)], ['9-2017','GTC4Lusso',parseFloat(2+6)], ['9-2017','F12tdf',parseFloat(1+0)], ['9-2017','LaFerrari',parseFloat(0+1)], ['9-2017','488 GTB',parseFloat(18+13)], ['9-2017','458 Spider',parseFloat(3+2)], ['9-2017','F12berlinetta',parseFloat(4+10)], ['9-2017','458 Speciale',parseFloat(5+1)], ['9-2017','California T',parseFloat(23+37)], ['9-2017','488 Spider',parseFloat(11+14)], ['8-2017','FF',parseFloat(0+1)], ['8-2017','458 Spider',parseFloat(0+1)], ['8-2017','F12berlinetta',parseFloat(0+3)], ['8-2017','GTC4Lusso',parseFloat(0+6)], ['8-2017','488 GTB',parseFloat(0+1)], ['8-2017','California T',parseFloat(0+2)], ['8-2017','458 Italia',parseFloat(0+2)], ['8-2017','California',parseFloat(0+2)], ['7-2017','488 GTB',parseFloat(9+14)], ['7-2017','458 Speciale',parseFloat(1+4)], ['7-2017','California T',parseFloat(14+20)], ['7-2017','GTC4Lusso',parseFloat(1+7)], ['7-2017','California',parseFloat(1+6)], ['7-2017','458 Italia',parseFloat(1+4)], ['7-2017','458 Speciale Aperta',parseFloat(1+0)], ['7-2017','F12berlinetta',parseFloat(3+7)], ['7-2017','FF',parseFloat(2+3)], ['7-2017','458 Spider',parseFloat(1+3)], ['7-2017','488 Spider',parseFloat(10+10)], ['7-2017','F12tdf',parseFloat(0+1)], ['6-2017','488 GTB',parseFloat(7+23)], ['6-2017','458 Italia',parseFloat(2+2)], ['6-2017','812 Superfast',parseFloat(1+0)], ['6-2017','FF',parseFloat(0+3)], ['6-2017','GTC4Lusso',parseFloat(2+16)], ['6-2017','458 Spider',parseFloat(3+6)], ['6-2017','F12tdf',parseFloat(0+2)], ['6-2017','LaFerrari',parseFloat(0+1)], ['6-2017','F12berlinetta',parseFloat(4+9)], ['6-2017','458 Speciale',parseFloat(2+3)], ['6-2017','California T',parseFloat(16+18)], ['6-2017','488 Spider',parseFloat(11+14)], ['5-2017','458 Speciale',parseFloat(4+4)], ['5-2017','458 Italia',parseFloat(0+2)], ['5-2017','F12berlinetta',parseFloat(2+5)], ['5-2017','F12tdf',parseFloat(0+3)], ['5-2017','FF',parseFloat(0+1)], ['5-2017','488 GTB',parseFloat(8+13)], ['5-2017','458 Spider',parseFloat(0+2)], ['5-2017','GTC4Lusso',parseFloat(0+6)], ['5-2017','488 Spider',parseFloat(6+12)], ['5-2017','California T',parseFloat(12+19)], ];

Я хочу извлечь уникальные модели из столбца и создать серию для линейного графика 

function extractColumn(arr, column) {
    function reduction(previousValue, currentValue) {
        previousValue.push(currentValue[column]);
        return previousValue;
    }

    return arr.reduce(reduction, []);
}

var prima = extractColumn(qry,1);
var models = [...new Set(prima)];

с помощью столбца извлечения я получаю все значения столбца 1, а с помощью оператора распространения я получаю массив моделей без дубликата. 

var testa = [];   // the header of the matrix
var tabella = []; // the array for the DataTable

for (i=1; i<models.length; i++) {
    riga[i]=0;
}
testa.push([{label:'Montly', type: 'string'}]);
for (i=1; i<models.length; i++) {
    testa.push([{label:models[i], type:'number'}]);
} // this code create the header objects
tabella.push(testa);      //push the header into the tabella array
console.log(tabella[0]);  //this push is ok!
var mese=qry[1][0];       // first date value
var riga = [];            // array to add as row of the matrix
riga[0]=mese;             // start populating the firs row

следующий код должен создать новую строку и добавить ее в таблицу диаграммы. Он проверяет дату каждой строки матрицы запроса (qry): если это новая дата, добавьте созданную строку в таблицу диаграммы и начните новую строку, если нет, то продолжите создание новой строки. 

for (i=1; i<qry.length; i++){             // iterate qry array
    if (mese!=qry[i][0]) {        // check if the date is new
        console.log(riga);                // all the created row are ok!
        tabella.push(riga);               // append the row to the array
        console.table(tabella);           // WEIRD PROBLEM: ALL THE ARRAY ROW ARE CHANGED
        mese=qry[i][0];                   // EVERY CICLE! 
        for (x=1; x<models.length; x++) {
            riga[x]=0;
        }
        riga[0]=mese;                     //reset the new row array and set the date
    } else {
        for (t=0;t<models.length;t++){
            pos = models.indexOf(qry[i][1]);
            if (pos != -1) {
                riga[pos]=qry[i][2]
                }
        }                                // this code populates the new row.
    }
}

Следующий код создает диаграмму 

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    var data = google.visualization.arrayToDataTable(tabella);

   var options = {
        title: 'Montly Trend Focus on Complaint Type',
        colors: ['#D9D904','#2A55FF','#000000'],
        backgroundColor: {fill:'#FAFAFA',strokeWidth:1},
        chartArea: {width:1800,height:380,left:70},
        curveType: 'none',
        legend: { position: 'bottom' },
        hAxis: {direction:-1},
        annotations: {
            alwaysOutside: true,
            textStyle: {
                fontSize: 12,
                bold: true,
                color: '#000000',
            }
        }
    };

    var chart = new google.visualization.LineChart(document.getElementById('line_chart'));

    chart.draw(data, options);
}

это изображение с моей консоли:

enter image description here

1 Ответ

0 голосов
/ 16 мая 2018

Я решил свою проблему, повторно объявив новую строку в цикле: 

for (i=1; i<qry.length; i++){
    if (mese!=qry[i][0]) {
        tabella.push(riga);
        var riga=[];             // NEW DECLARATION
        mese=qry[i][0];
        for (x=1; x<models.length; x++) {
            riga[x]=0;
        }
        riga[0]=mese;
    }
    else {
        for (t=0;t<models.length;t++){
            pos = models.indexOf(qry[i][1]);
            if (pos != -1){riga[pos]=qry[i][2]}
        }
        }
}

Надеюсь, это будет полезно для других.

...