I can’t understand why the values ​​in my objects are changing

Question

I am trying to understand why the values ​​in my chart are not showing correctly. When I register learningLanguages[j].count++ as they cyclize, they are accurate. However, when I write n to the map function in the $.map(nativeLanguages, function(n) {...}) diagram $.map(nativeLanguages, function(n) {...}) , the calculations are all wrong (and seem arbitrary)

 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 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

Part of your problem is related to pushing the same object on 2 different arrays:

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

This does not copy the currentLanguage to each, it pushes links from the same object to each.

Then everything you do with this object link in one will be reflected in another

Try to make 2 separate objects

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

using global variables will also cause you problems ... don't do this!

Answer 2

 learningLanguages = [] nativeLanguages = [] 

These two variables look like they are not defined in the above area, so the second XHR call is not aware of these variables.

The second part of the answer is a reference to the same instance of the object, with the same “count” attribute that it touched twice.

I would suggest two options:

• use new Language(...) for each of these two arrays separately
• or have a separate counter for each type of native/learning counters.