I am doing Intermediate JS, Modules project. Im stuck in step 8, I cant import four functions from a file in Module folder to main JS. I believe the syntax is correct by seems not to work still. I have used ES6 import and export syntax.
I have included the linkhere https://www.codecademy.com/courses/learn-intermediate-javascript/projects/es6-modules-workaround.
Hey @boardninja12316,
Could you please include your code? Don’t forget to format it before posting.
Thanks
This workAroundModule.js which is inside modules folder
```
// Add your imports here.
```
import {getDataByRole, getDataCompany} from './salaryData.js';
import salaryData from './salaryData.js';
// Replace the empty array with the appropriate imported function/value
const getAverageSalaryByRole = role => {
const roleData = getDataByRole();
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();
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 = salaryData;
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);
}
export { getAverageSalaryByRole, getAverageSalaryByCompany, getSalaryAtCompany, getIndustryAverageSalary };
// 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);
}
```This is main.js where I have imported functions ```
getAverageSalaryByRole, getAverageSalaryByCompany, getSalaryAtCompany, getIndustryAverageSalary
// TODO: Add your import statements here.
import {getRoles, getCompanies} from './modules/salaryData.js';
import { getAverageSalaryByRole, getAverageSalaryByCompany, getSalaryAtCompany, getIndustryAverageSalary } from './module/calculations.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();
const averageSalaryByCompany = getAverageSalaryByCompany();
const salary = getSalaryAtCompany();
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}`;
}
Is your directory called ‘modules’ or ‘module’?
Is ‘modules’. I have rectified that mistake in the code and still not working, I cannot use the functions.
So what is the error message now?
THere is not one. I just cannot use the exported functions. I have imported other functions to the same ‘main.js’ file using the same syntax and it worked.
Have you opened the browser’s console? I’m quite sure there will be an error message.
hello,
I think you’ve missed a bit in the top import line there
“import { getDataByRole, getDataByCompany } …”
think you have just missed the “By” in “getDataByCompany”