正しいコンソール出力の直後にJavascript配列が未定義になる

Question

私は与えられたデータを持つグラフを描く関数を持っています。データはパラメータとともに渡されます。関数は次のようになります

// The function call 
drawElectionResultsChart(electionResultsChartData); 

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

drawElectionResultsChart（データ）に渡されるデータは次のようになり、二次元配列である：

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>` 
     ); 
    } 
} 

私は次のコードで関数を呼び出します。

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] 

メインアレイ内の各アレイには3つの値が含まれています。問題はこれです。その行で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>` 
     ); 
    } 
} 

を試してみてください