私のオブジェクトの値が変化している理由を理解できません

Question

私のグラフの値が正しく出てこない理由を理解しようとしています。ループしているときにlearningLanguages[j].count++の値を記録すると、正確です。しかし、私はチャート$.map(nativeLanguages, function(n) {...})にマップ機能でnをログインしたときに、カウントがすべて間違って（と一見任意）されている問題の

var getLanguages = $.get('/languages.json', function(languages){ 
     // top level language arrays 
     learningLanguages = [] 
     nativeLanguages = [] 

     // object constructor that correctly formats the language objects 
     function Language(lang) { 
      this.language = lang; 
      this.count = 0; 
     } 

     // Loop through the languages, create an object for each, push to top level language arrays 
     for(i = 0; i < languages.length; i++) { 
      currentLanguage = new Language(languages[i].language) 

      learningLanguages.push(currentLanguage) 
      nativeLanguages.push(currentLanguage) 
     } 
    }); 

    // once the languages call is complete find signed-in user's info 
    getLanguages.done(function() { 
     $.get('/users.json', function(response) { 
      // console.log(response) 
      // adds the total number of users to the DOM 
      var numberOfUsers = response.length 
      $('#userCount').append('<h1>Total Users: ' + numberOfUsers + '</h1>') 
      // find the number of approved users 
      // var numberApproved = 0 
      // for (i = 0; i < response.length; i++) { 
      //  if (response[i].approved === true) { 
      //   numberApproved++ 
      //  } 
      // } 
      // Add the number of approved users to the DOM 
      // $('#userCount').append('<h1>Total Approved Users: ' + numberApproved + '</h1>') 


      // search for the language in the array and increase the count for that language 
      for (i = 0; i < response.length; i++) { 
       var userLearningLanguage = response[i].learning_language 

       for (j = 0; j < learningLanguages.length; j++) { 
        if (learningLanguages[j].language === userLearningLanguage) { 
         learningLanguages[j].count++ 
        } 
       } 
      } 
      // search for the language in the array and increase the count for that language 
      for (i = 0; i < response.length; i++) { 
       var userNativeLanguage = response[i].native_language 
       for (j = 0; j < nativeLanguages.length; j++) { 
        if (nativeLanguages[j].language === userNativeLanguage) { 
         nativeLanguages[j].count++ 
        } 
       } 
      } 

      var ctx = $("#languageComparisonChart"); 
      var myChart = new Chart(ctx, { 
       type: 'bar', 
       data: { 
        labels: 
         $.map(learningLanguages, function(n) { 
          return n.language 
         }), 
        datasets: [{ 
         label: '# of Learners', 
         data: $.map(learningLanguages, function(n) { 
           return n.count 
          }), 
         backgroundColor: 'rgba(255, 99, 132, 0.2)', 
         borderColor: 'rgba(255,99,132,1)', 
         borderWidth: 1 
        }, 
        { 
         label: '# of Native Speakers', 
         data: $.map(nativeLanguages, function(n) { 
          console.log(n) 
           return n.count 
          }), 
         backgroundColor: 'rgba(54, 162, 235, 0.2)', 
         borderColor: 'rgba(54, 162, 235, 1)', 
         borderWidth: 1 
        }] 
       }, 
       options: { 
        scales: { 
         yAxes: [{ 
          ticks: { 
           beginAtZero:true 
          } 
         }] 
        }, 
        responsive: false, 
        maintainAspectRatio: true 
       } 
      }); 
     }) 
    }); 
} 

Answer 1

パートは、ここでは2つの異なる配列に同じオブジェクトを押してから茎：

for(i = 0; i < languages.length; i++) { 
     currentLanguage = new Language(languages[i].language) 

     learningLanguages.push(currentLanguage) 
     nativeLanguages.push(currentLanguage) 
    } 

これは、それぞれにcurrentLanguageをコピーせず、同じオブジェクトの参照をそれぞれにプッシュします。あなたが1でそのオブジェクト参照を行うものは何でもその後

が他の

に反映されます2つの別々のオブジェクト

for(i = 0; i < languages.length; i++) { 
     learningLanguages.push(new Language(languages[i].language)) 
     nativeLanguages.push(new Language(languages[i].language)) 
    } 

もトラブルにあなたを取得するグローバル変数の使用を作ってみましょう...それをしないでください！

Answer 2

learningLanguages = [] 
nativeLanguages = [] 

それらが上記の範囲で定義されていないように、これら二つの変数が見える - これ第二XHRコールは、これらの変数について知っていません。

2番目の答えは、同じ "count"属性が2回タッチされた同じオブジェクトインスタンスへの参照です。

私は2つのオプションをお勧めしたいのページ：

• これら2つの配列のそれぞれの使用new Language(...)別途
• またはnative/learningカウントの種類ごとに別々のカウンタを持っています。