正確的控制檯輸出後，Javascript數組變得不確定

Question

我有一個函數可以繪製給定數據的圖表。數據通過參數傳遞。該函數如下所示：

drawCustomChart(element, data) { 
    console.log(data); 
    for (var i = 0; i < data.length; i++) { 
     element.append(
      `<div class="chart__item--${data[i][1]}"> 
       <div class="chart__item__tag">${data[i][0]}</div> 
       <div class="chart__item__bar"> 
        <div class="chart__item__bar__inner" style="width: ${data[i][2]}%" data-chart-bar="${data[i][1]}"></div> 
        <div class="chart__item__bar__tooltip chart__item__bar__tooltip--${data[i][1]}" data-tooltip="${data[i][1]}"> 
         <div class="chart__item__bar__tooltip__arrow"></div> 
         <span class="chart__item__bar__tooltip__label">${data[i][0]}: ${data[i][2]}</span> 
        </div> 
       </div> 
       <div class="chart__item__label">${data[i][2]}</div> 
      </div>` 
     ); 
    } 
} 

我請用下面的代碼的功能：

// The function call 
drawElectionResultsChart(electionResultsChartData); 

// The function that's being called 
drawElectionResultsChart(data) { 
    helpers.drawCustomChart($$.voteCountsChart, data); 
} 

傳遞給drawElectionResultsChart（數據）中的數據是一個兩維數組，它看起來像這樣：

Array[13] 
    0: Array[3] 
    1: Array[3] 
    2: Array[3] 
    3: Array[3] 
    4: Array[3] 
    5: Array[3] 
    6: Array[3] 
    7: Array[3] 
    8: Array[3] 
    9: Array[3] 
    10: Array[3] 
    11: Array[3] 
    12: Array[3] 
    length: 13 
    __proto__: Array[0] 

主數組內部的每個數組都包含三個值。問題是這樣的。在console.logs數組（console.log(data)）內部的drawCustomChart函數中，它工作正常，數組被記錄下來。但是，在日誌之後，它由於某種原因再次執行console.log，然後它說undefined。因爲數組突然變得未定義，所以drawCustomChart方法輸出一個關於data.length的錯誤（因爲data現在未定義）。

爲什麼會發生這種情況，我該如何解決？

Answer 1

試試這個

drawCustomChart(element, data) { 
    console.log(data); 
    for (var i = 0; i < Object.keys(data).length; i++) { 
     element.append(
      `<div class="chart__item--${data[i][1]}"> 
       <div class="chart__item__tag">${data[i][0]}</div> 
       <div class="chart__item__bar"> 
        <div class="chart__item__bar__inner" style="width: ${data[i][2]}%" data-chart-bar="${data[i][1]}"></div> 
        <div class="chart__item__bar__tooltip chart__item__bar__tooltip--${data[i][1]}" data-tooltip="${data[i][1]}"> 
         <div class="chart__item__bar__tooltip__arrow"></div> 
         <span class="chart__item__bar__tooltip__label">${data[i][0]}: ${data[i][2]}</span> 
        </div> 
       </div> 
       <div class="chart__item__label">${data[i][2]}</div> 
      </div>` 
     ); 
    } 
}