Function wont run inside for each loop inside another function-CodePudding

Could someone point out to me why the patientMatch function doesn't appear to run. I need to match the exam info with the patients information to display on a table. Running the function outside of the displayExams functions has no issues, but once its inside the displayExams function it doesnt run. Also logging out patientMatch inside the displayExams function comes back with undefined.

function examPatientMatch(exam) {
    for (let i = 0; i < patients.length; i  ) {
        if ( exam === patients[i].PATIENT_ID  ) {
            return patiens[i]
        } else {
            console.log('not it')
        }   
    }
}

function displayExams(exams) {
    let examHTML = '';

    exams.forEach((exam, index) => {

        
        let patientId = exam.patient_Id;
        // let imgStudyDays = exam.Diag_to_img_study_days;
        // let imgStudyHrs = exam.Diagnosis_to_imaging_time_hrs;
        // let imgDesc = exam.Image_study_description;
        let studyMod = exam.study_modality;
        let keyFind = exam.key_findings;
        let img = exam.png_filename;
        let examId = exam.exam_Id;

        examPatientMatch(exam)
   
        examHTML  = `
        <div  data-index="${index}">
        <div  data-title="Patient ID"><a>${patientId}</a></div>
        <div  data-title="Exam ID">${examId}</div>
        <div  data-title="Xray"><img src="https://ohif-hack-diversity-covid.s3.amazonaws.com/covid-png/${img}" alt="Xray"></div>
        <div  data-title="Key FIndings">${keyFind}</div>
        <div  data-title="Study Modality">${studyMod}</div>
        <div  data-title="Age">51</div>
        <div  data-title="Gender">Male</div>
        <div  data-title="BMI">37.7</div>
        <div  data-title="Zip Code">722</div>
        </div>`
    });
    examTable.innerHTML  = examHTML;
}

CodePudding user response：

you need to provide more details about your code.

if you declare a function inside another function for using the inner function, first YOU MUST call the parent function at least once.

check the names of function for any typo you may accidentally wrote. because if you do and you are not in use strict mode you not gonna get any errors.

javascript has 2 phase when it comes to your code. creation phase and execution phase. during creation phase variables are created and their values are set to undefined and in the execution phase actual values will be set. so if you do not declare a function you call, you will have reference error. as you don't and you see undefined the declaration was successful. so maybe in examPatientMatch function the if statement never match and nothing will return except undefined

i have some tips to tell you when i saw your code.

1 - i see you want to find match exam in the list of patiens array. it is better to pass object and array to the function. in this way you can reuse the function later.

function findItemInListByKey(object, array, key) {
    for (let i = 0; i < array.length; i  ) {
        if ( exam === array[i][key]  ) {
            return array[i];
        } else {
            console.log('not it')
        }   
    }
}

findItemInListByKey(exam, patiens,'PATIENT_ID')

2- in foreach call back you try to access patient_Id lowercase but in examPatientMatch function you try to check and object with a value you should do exam.patient_Id === patients[i].PATIENT_ID.

you can use Destructuring assignment for exam object

let examHTML = '';

 exams.forEach((exam, index) => {

   const { 
    patient_Id,
    Diag_to_img_study_days,
    Diagnosis_to_imaging_time_hrs,
    Image_study_description,
    study_modality,
    key_findings,
    png_filename,
    exam_Id } = exam;

     examPatientMatch(exam)
   
        examHTML  = `
        <div  data-index="${index}">
        <div  data-title="Patient ID"><a>${patientId}</a></div>
        <div  data-title="Exam ID">${examId}</div>
        <div  data-title="Xray"><img src="https://ohif-hack-diversity-covid.s3.amazonaws.com/covid-png/${img}" alt="Xray"></div>
        <div  data-title="Key FIndings">${keyFind}</div>
        <div  data-title="Study Modality">${studyMod}</div>
        <div  data-title="Age">51</div>
        <div  data-title="Gender">Male</div>
        <div  data-title="BMI">37.7</div>
        <div  data-title="Zip Code">722</div>
        </div>`
 });

examTable.innerHTML  = examHTML;

3- you can use javascript high order function called find its much cleaner way to deal with finding objects in array. so insted of writing functions like examPatientMatch you can do this:

const match = patients.find(element => element.PATIENT_ID === exam.patient_Id)
// or exam if you sure exam is not object in your function

CodePudding user response：

Thank you I was able to find the problem. Was a minor issue due to displayExam function being called before patient data was fetched causing it to show undefined.

As for why I'm using patient_Id and PATIENT_ID it is due to how the data was created.

I will try the .find method to help clean up my code. Thank you all once again.