WorkAround Explorer - getting $NaN in results, please help

https://www.codecademy.com/courses/learn-intermediate-javascript/projects/es6-modules-workaround

I am having problems with this exercise and cannot see it being referred to in similar topics on WorkAround Explorer exercise. I have completed steps 1 to 9 and all seem ok, but when I select the radial buttons it shows $NaN in the salary response:
The industry average salary for CTO positions is $NaN
The average salary at Medium Data Inc. is $NaN
Main.js:

``` // TODO: Add your import statements here. import {getRoles, getCompanies} from './modules/salaryData.js'; import { getAverageSalaryByRole, getAverageSalaryByCompany, getSalaryAtCompany, getIndustryAverageSalary} from './modules/workAroundModule.js'; import {formatNumber} from './modules/utilities.js'; // TODO: Get the companies and roles using the salaryData module. const companies = getCompanies(); const roles = getRoles(); // Create input buttons for every company and role represented in the data. renderInputButtons(companies, 'company'); renderInputButtons(roles, 'role'); // This function will create a new <section> with radio // inputs based on the data provided in the labels array. function renderInputButtons(labels, groupName) { const container = document.createElement('section'); container.setAttribute('id', `${groupName}Inputs`); let header = document.createElement('h3'); header.innerText = `Select a ${groupName}`; container.appendChild(header); labels.forEach(label => { // For each label... // Create the radio input element. let divElement = document.createElement('div'); divElement.setAttribute('class', 'option'); let inputElement = document.createElement('input'); inputElement.setAttribute('type', 'radio'); inputElement.setAttribute('name', groupName); inputElement.setAttribute('value', label); divElement.appendChild(inputElement); // Create a label for that radio input element. let labelElement = document.createElement('label'); labelElement.setAttribute('for', label); labelElement.innerText = label; divElement.appendChild(labelElement); // Update the results when the input is selected. inputElement.addEventListener('click', updateResults); container.appendChild(divElement); }); document.querySelector('main').prepend(container); } function updateResults(){ // Get the current selected company and role from the radio button inputs. const company = document.querySelector("input[name='company']:checked").value; const role = document.querySelector("input[name='role']:checked").value; // If either the company or role is unselected, return. if (!company || !role) { return; } // TODO: Use the workAroundModule functions to calculate the needed data. const averageSalaryByRole = getAverageSalaryByRole(role); const averageSalaryByCompany = getAverageSalaryByCompany(company); const salary = 0; const industryAverageSalary = 0; // Render them to the screen. document.getElementById('salarySelected').innerText = `The salary for ${role}s at ${company} is \$${salary}`; document.getElementById('salaryAverageByRole').innerText = `The industry average salary for ${role} positions is \$${averageSalaryByRole}`; document.getElementById('salaryAverageByCompany').innerText = `The average salary at ${company} is \$${averageSalaryByCompany}`; document.getElementById('salaryAverageIndustry').innerText = `The average salary in the Tech industry is \$${industryAverageSalary}`; }

salaryData,js:

const salaryData = [ { role: 'CTO', company: 'Big Data Inc.', salary: 320000}, { role: 'Technical Lead', company: 'Big Data Inc.', salary: 230000}, { role: 'Software Engineer II', company: 'Big Data Inc.', salary: 180000}, { role: 'Software Engineer I', company: 'Big Data Inc.', salary: 140000}, { role: 'CTO', company: 'Medium Data Inc.', salary: 215000}, { role: 'Technical Lead', company: 'Medium Data Inc.', salary: 165000}, { role: 'Software Engineer II', company: 'Medium Data Inc.', salary: 140000}, { role: 'Software Engineer I', company: 'Medium Data Inc.', salary: 115000}, { role: 'CTO', company: 'Small Data Inc.', salary: 175000}, { role: 'Technical Lead', company: 'Small Data Inc.', salary: 135000}, { role: 'Software Engineer II', company: 'Small Data Inc.', salary: 115000}, { role: 'Software Engineer I', company: 'Small Data Inc.', salary: 95000}, ]; const getRoles = () => { return ['CTO', 'Technical Lead', 'Software Engineer II', 'Software Engineer I']; } const getCompanies = () => { return ['Big Data Inc.', 'Medium Data Inc.', 'Small Data Inc.']; } const getDataByRole = role => { return salaryData.filter(obj => obj.role === role); } const getDataByCompany = company => { return salaryData.filter(obj => obj.company === company); } export {getRoles, getCompanies, getDataByRole, getDataByCompany}; export default salaryData;

workAroundModule.js:

// Add your imports here. import {getDataByRole, getDataByCompany} from './salaryData.js' import salaryData from "./salaryData.js"; // Replace the empty array with the appropriate imported function/value const getAverageSalaryByRole = role => { const roleData = []; const salariesOfRole = roleData.map(obj => obj.salary); return calculateAverage(salariesOfRole); } // Replace the empty array with the appropriate imported function/value const getAverageSalaryByCompany = company => { const companyData = []; const salariesAtCompany = companyData.map(obj => obj.salary); return calculateAverage(salariesAtCompany); } // Replace the empty array with the appropriate imported function/value const getSalaryAtCompany = (role, company) => { const companyData = []; const roleAtCompany = companyData.find(obj => obj.role === role); return roleAtCompany.salary; } // Replace the empty array with the appropriate imported function/value const getIndustryAverageSalary = () => { const allSalaries = [].map(obj => obj.salary); return calculateAverage(allSalaries); } // Helper Function. Do not edit. // Note: This function does not need to be exported since it is only used by the functions contained within this module. function calculateAverage(arrayOfNumbers) { let total = 0; arrayOfNumbers.forEach(number => total += number); return (total / arrayOfNumbers.length).toFixed(2); } export { getAverageSalaryByRole, getAverageSalaryByCompany, getSalaryAtCompany, getIndustryAverageSalary};

I have not completed the salary and industryAverageSalary because as soon as I do that, nothing appears in the Details Pane:

// TODO: Use the workAroundModule functions to calculate the needed data. const averageSalaryByRole = getAverageSalaryByRole(role); const averageSalaryByCompany = getAverageSalaryByCompany(company); const salary = 0; const industryAverageSalary = 0;
Here is a screen shot of the output:
![image|617x296](upload://jo5kI92oSIM7VBJ4ibeYS9txZBA.png)

Why am I not getting a number?

Try step 6 again. Until you replace those empty arrays there won’t be any numbers to display.

Step 6

Each of the incomplete functions in workAroundModule.js contains an empty array ( [] ) that needs to be replaced. You will need to use the appropriate imported data/functions from the salaryData.js module to replace these arrays.

Thank you so much, that worked, I don’t know how I missed this step. Makes sense now.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.