無法弄清楚爲什麼我的對象中的值正在改變

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複製到每個中，它會將相同對象的引用推送到每個對象中。

然後不管你做什麼，以一個對象的引用將在其他

反映嘗試製作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調用不知道這些變量。

答案的第二部分是對同一對象實例的引用，同一個「count」屬性觸及兩次。

我建議兩個選項的位置：對於這兩種陣列分別

• 使用new Language(...)或對每種類型的native/learning計數一個獨立的計數器。