innerText value is undefined when returned from promise despite being there on the console

Question

I'm using Node JS, here's the code

import fetch from 'node-fetch';
import { JSDOM } from 'jsdom';
import {Appartment} from "./models/Appartment.mjs"



let applist = []

let multipleDivs = []

async function kijAppartments() {


        try {
         const kijCall = await fetch(`https://www.kijiji.ca/b-ville-de-montreal/appartement-4-1-2/k0l1700281?rb=true&dc=true`);
            if(!kijCall.ok) {
                throw new Error (
                    `HTTP error: ${kijCall.status}`
                )
            }

            const response = await kijCall.text()
            const dom = new JSDOM(response)
            multipleDivs = dom.window.document.querySelectorAll(".info-container")
            // console.log(multipleDivs)
           return multipleDivs
        }
        catch(error) {
           console.log("Error Made")
           console.log(error)
        }



}

async function arrayOfApps() {

    await kijAppartments()
    .then(data => {
        data.forEach(div => {
            const newApp = new Appartment 
            newApp.price = div.childNodes[1].innerText
            newApp.title = div.childNodes[3].innerText
            newApp.description = div.childNodes[7].innerText
            console.log(newApp)
          

        })
    })

}


await arrayOfApps()

If you go on this link and try the following const aList = document.querySelectorAll(".info-container"), you get access to all of the nodes, innerHTML and innerText all work and give you access to the actual value but for some reason, when I try to run this code in the terminal, the value of all my objects is undefined.

`JSDOM` doesn't have an `innerText` method. Try using `textContent` instead. — Timur, Jun 28 '22 at 18:23

score 0 · Answer 1 · answered Jun 28 '22 at 18:38

You should use textContent instead of innerText.

Here's my solution:

const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));
const jsdom = require('jsdom');
const { JSDOM } = jsdom;

class Appartment {
    price
    title
    description
    location
}

let multipleDivs = []
const appartments = []

function trim(text){
    return text.replace(/(\r\n|\n|\r)/gm, "").trim()
}


async function fetchKijijiAppartments() {
    const url = `https://www.kijiji.ca/b-ville-de-montreal/appartement-4-1-2/k0l1700281?rb=true&dc=true`
    try {
        const kijijiRes = await fetch(url);
        if (!kijijiRes.ok) {
            throw new Error(
                `HTTP error: ${kijijiRes.status}`
            )
        }

        const response = await kijijiRes.text()
       // console.log("DB: ", response)
        const dom = new JSDOM(response)
        multipleDivs = dom.window.document.querySelectorAll(".info-container")
        //console.log("DB: " multipleDivs)
        return multipleDivs
    } catch (error) {
        console.log("Error Made")
        console.log(error)
    }
}


async function scrapeAppartments() {

    await fetchKijijiAppartments()
        .then(data => {
            data.forEach(div => {
                const appartement = new Appartment
                appartement.price = trim(div.querySelector(".price").textContent)
                appartement.title = trim(div.querySelector(".title").textContent)
                appartement.description = trim(div.querySelector(".description").textContent)
                console.log("DB: ", appartement)
                appartments.push(appartement)
            })
        })

}

scrapeAppartments()

innerText value is undefined when returned from promise despite being there on the console

1 Answers1