Javascript - Array/Object exists in console.log, but returns undefined when accessing properties

Question

I spent an unreal amount of time trying to figure out what the issue is.

I'm creating a chrome plugin accessing certain data on a LinkedIn page, and syncing this towards a CRM/ATS.

If my code is a bit messy with unnecessary uses of async or promises, I apologize, but it's cause I've tried several solutions at this point.

My variable quickbaseData logs without issue, and returns me a list of objects.

My variable linkedinData however, I am completely stuck with.

I want to be able to read from a list of objects or object.data, either doesn't matter. I've tried both at this point.

The problem is, regardless if i use an array or an object, as soon as I try to access a variable, I get undefined. The object exists, but I can't access it's length or it's property.

As you can see in the example below, when simply logging the object, It's able to read the data, however as soon as I try object.data or object?.data, it returns undefined or falsy values, despite the console log just having shown that the object exists with properties.

When I copy over the object to an instance of node in a terminal, I am able to access the properties of the object, however in my code below, as soon as I try to access a property it results in undefined

Any advice on what could be going on?

function findLinkedinCandidateInQuickbase(linkedinData, quickbaseData) {
    console.log("Linkedin Data", linkedinData, linkedinData.data, Object.entries(linkedinData))
    // Logs the following: 
        // linkedinData - {data: {full_name: 'Lorem Ipsum', email: 'N/A', phone: 'N/A', linkedin: '<url>'} 
        // linkedinData.data - undefined. I've tried both with optional chaining and without.
        // Object.entries(linkedinData) - Array with length 0
    
    
    const length = quickbaseData.length

    const full_name = linkedinData?.full_name
    const email = linkedinData?.email
    const linkedin1 = linkedinData?.linkedin1
    const linkedin2 = linkedinData?.linkedin2
    const phone = linkedinData?.phone

    Promise.all([full_name, email, linkedin1, linkedin2, phone]).then(value => console.log("promise value", value)) // promise value (5) [undefined, undefined, undefined, undefined, undefined]

    console.log("rcvd: ", email, full_name, linkedin1, linkedin2, phone) // rcvd:  undefined undefined undefined undefined undefined
    for (let i = 0; i < length; i++) {
        // console.log(quickbaseData[i])
        let check = []
        if (quickbaseData[i].candidate_name === full_name) check.append(true);
        if (quickbaseData[i].email === email) check.append(true);
        if (quickbaseData[i].linkedin === linkedin1) check.append(true);
        if (quickbaseData[i].linkedin === linkedin2) check.append(true);
        if (quickbaseData[i].phone === phone) check.append(true);
        if (check.includes(true)) {
            return quickbaseData[i].record_id
        } 
    }
    return null;
}

async function linkedinFindCandidate () {
    let quickbaseData = await quickbaseCandidateData()
    let linkedinData = await linkedinCandidateData()

    Promise.all([linkedinData, quickbaseData]).then((res) => {
        console.log(res) // I receive an array containing two objects, both objects (linkedinData and quickbaseData) are populated with the correct properties, no issues here.
        let record_id = findLinkedinCandidateInQuickbase(res[0],res[1])
        if (record_id) {
            console.log("Candidate found: ", record_id)
        } else {
            console.log("I checked for a candidate but found none.")
        }
    })
}


export { linkedinFindCandidate };

EDIT:

Attempted the following, no luck:

console.log("Linkedin Data", linkedinData) // has data shows up as expected
console.log("Linkedin Data", linkedinData?.data) // undefined
console.log("Linkedin Data", linkedinData.data)  // undefined
console.log("Linkedin Data", linkedinData["data"])  // undefined
console.log("Linkedin Data", JSON.stringify(linkedinData))  // empty object
console.log("Linkedin Data", Object.keys(linkedinData)) // empty array
console.log("Linkedin Data", Object.entries(linkedinData)) // empty array

Answer 1

I figured out the issue.

The problem was indeed occurring in linkedinCandidateData()

Here's a snippet of the code I had:

function linkedinCandidateData() {
        let candidateData = {}
        var intervalId = window.setInterval(async function () {
            let grabbedData = await getCandidateData(candidateData, intervalId)
            candidateData["data"] = grabbedData

        }, 1000);
        console.log('linkedin_fetch_candidate_data: ', candidateData)
        return candidateData
    }

This would immediately return {} as it's not waiting for the setInterval to do anything, and as such no data exists when I called the function.

The console shows a "live" version of objects, not always the data at the time of the console.log(). Eventually the object is mutated, so eventually there is data in it, but not by the time findLinkedinCandidateInQuickbase() is called.

I was previously planning on re-writing this using MutationObservers, and solved it in the process.

I eventually re-wrote it to this:

async function linkedinCandidateData() {
    await waitForElm(".contact-info");
    let candidateData = await getCandidateData();
    console.log("Candidate data", candidateData);
    return await Promise.resolve(candidateData); // this might be redundant, but it works at least.
}

and waitForElm (copied from elsewhere on Stackoverflow)

function waitForElm(selector) {
    return new Promise((resolve) => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver((mutations) => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true,
        });
    });
}