Help on "WorkAround Explorer" Project in Modules section

In workAroundModule.js you’re calling the “get…” functions anonymously. You would need to be calling them using the right arguments. Check how the function is declared. Take this for example

export const getAverageSalaryByRole = role => {

  const roleData = getDataByRole();

  const salariesOfRole = roleData.map(obj => obj.salary);

  return calculateAverage(salariesOfRole);

}

getDataByRole is defined like so:

const getDataByRole = (role) => {
  return salaryData.filter((obj) => obj.role === role);
};

But you’re missing the argument (role) when you use it in roleData. This applies for all your references to functions in your salaryData.js

3 Likes

Hey everyone, I’ve been trying to complete this project for over 3 days now and despite all the help I received from the community, I still couldn’t notice my mistake and for those who may want to help, I’m leaving some images that might be helpful.

File path:
tree

File path after been clicked :
collapsed

That means, our file tree looks like that:

|__ files
      |__ index.html
      |__ index.css
      |__ main.js
      |__ modules
             |__ workAroundModule.js
             |__ salaryData.js

The file paths shown under hints:
hint-1

hint-2

The result when you use ./files/modules/{fileName} instead of ./modules/{fileName}:
result

Moin @autobahnmaus
what’s your problem with that exercise? All your imports and exports look fine to me.

And this

is not what you did in the code you posted in your first post. So what doesn’t work exactly?

Error on line 21 in workAroundModule.js

Function calls itself
const companyData = getSalaryAtCompany(company);

Instead of
const companyData = getDataByCompany(company);

A big shout-out to: @gabec123
He found the mistake and showed it to me. If you have further questions, I’m pretty sure that he can help you with that. Thank you once again to everyone who tried to help me

1 Like

Thank you! I would not have found that error in a thousand hours of combing the code, and I’d just have kept repeating it every time I reset the exercise. Lifesaver. Works perfectly now! And I will add missing arguments to my list of things to look for in debugging.

Thanks for this response, I was also having the same problem. I don’t quite understand why having the ./modules file path before /salaryData.js (i.e ‘./modules/salaryData.js’) causes the first two boxes to not render in the browser. If someone could explain I’d be very grateful!

I have copied your index.html, main.js, salaryData.js, workAroundModule.js

for some reason they don’t work, it just show the “details” box

I, like a lot of folx on this page, am having trouble with step 8; once I import the module from workAround.js the first two columns of the html no longer render.

Can anyone see anything that my eyes are missing?

main.js

// TODO: Add your import statements here. import {getRoles, getCompanies} from './modules/salaryData.js'; import { getAverageSalaryByRole, getAverageSalaryByCompany, getSalaryAtCompany, getIndustryAverageSalary} from './modules/workAroundModule.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 = 0; const averageSalaryByCompany = 0; 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}`; }

workAround.js

// Add your imports here. import {getDataByRole, getDataBYCompany} from './files/modules/salaryData.js'; import salaryData from './files/modules/salaryData.js'; // Replace the empty array with the appropriate imported function/value const getAverageSalaryByRole = role => { const roleData = getDataByRole(role); 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 = getDataByCompany(company); 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 = getDataByCompany(company); 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 = salaryData.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};

Hi there,
Check if file “workAround.js” has correct paths in code section where you import data (first couple lines) from other file. The file “workAround.js” should be already located in “module” directory so try use relative paths like “./salaryData.js”.
It worked at least for me. I was just stuck 1.5 days on this until I realized I messed up paths.

I have a problem with this exercise too. I did everything, but at step 9 it stops working. Everything seems okay, but the Details don’t show anything.
I hope you can help me :’)

Here is my code:
main.js

// TODO: Add your import statements here.
import { getRoles, getCompanies } from "./modules/salaryData.js";
import { getAverageSalaryByRole, getAverageSalaryByCompany, getSalaryAtCompany, getIndustryAverageSalary } from "./modules/workAroundModule.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 = getSalaryAtCompany(role, company);
const industryAverageSalary = getIndustryAverageSalary();

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

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 = getDataRole(role);
  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 = getDataByCompany(company);
  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 = getDataByCompany(company);
  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 = salaryData.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 };


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},
];

export const getRoles = () => {
  return ['CTO', 'Technical Lead', 'Software Engineer II', 'Software Engineer I'];
}

export const getCompanies = () => {
  return ['Big Data Inc.', 'Medium Data Inc.', 'Small Data Inc.'];
}

export const getDataByRole = role => {
  return salaryData.filter(obj => obj.role === role);
}

export const getDataByCompany = company => {
  return salaryData.filter(obj => obj.company === company);
}

export default salaryData;

1 Like

const getAverageSalaryByRole = (role) => {
const roleData = getDataRole(role);
const salariesOfRole = roleData.map(obj => obj.salary);
return calculateAverage(salariesOfRole);
}

I’m having the same problem with this step…could your problem be ""const roleData = getDataRole(role); ""should be: getDataByRole??

Although thatis what I have but my details still don’t work lol. It is what the hint section reflects here though. Good luck!

1 Like

I get the solution using the developers tool from firefox, I don’t remember where was the bug, but using this I solved it becasue I found the problem hahaha. I hope you find the bug soon! Good luck :smiley:

1 Like

Glad you got it worked out!

I had the same issue, I solved it making my code work (as the other threads says)
Now the code is working, and the exception is still log in the console.
So my advice is … Do not watch at this Exception and look for a failure in your code.

Only the third Details div box is already defined in the HTML of the page. The first two boxes are created by the code executing in main.js when it first loads. Only main.js is linked to the HTML document and loads when the page loads.
Until Step 8 you have been modifying the workAroundModule.js file but it has Not been executed by the browser when you save/refresh. Only when you import the workAroundModule.js functions to main.js in step 8, then the browser tries to load it along with its own imports to the salaryData.js modules. So only at this point you see result of the mistake you may have made in previous steps.
The imports fail to load and main.js doesn’t finish execution, never creating the other boxes. You are only seeing the plain original HTML file.
To see the error thrown you would have to open the Console in your browser’s dev tools as I mention here.

I think im having this problem, how do I correct my file paths?

Not sure if I understand the question: The folder structure is set by Codecademy. Your imports must represent the file structure.
If the importing file is workAroundModule.js and the function you’re importing is in salaryData.js, your import must be import {functionName} from './salaryData'

Found my bug! And completed the project, Thanks anyway, have a great day!

Hey I am stuck on the same place too. Did you find out the solution. Please help I cant get pass 4 :sob: :sob:
my main.js

// TODO: Add your import statements here.
import {getRoles, getCompanies} from './module/salaryData.js'
import salaryData from './module/salaryData.js'
// TODO: Get the companies and roles using the salaryData module.
const companies = ;
const roles = ;

// 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 = 0;
  const averageSalaryByCompany = 0;
  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}`;
}

and my salaryData.js file

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;

``