change JavaScript project endpoint from array to object

[Hany Taha]

I have a working project with the endpoint of array projectData = []
Now I'm required to change it to object projectData = {}.
But this change ruined my project. I get the following error in the console:
Error TypeError: Cannot read properties of undefined (reading 'temp')    at updateUI (app.js:88)
What I have tried:
I changed the method of adding objects to the end point to be projectData = newEntry instead of projectData.push(newEntry)
and then I got the above mentioned error in the console

here is the app.js code:
/* Global Variables */ const send = document.getElementById('generate'), feelings = document.getElementById('feelings') // Create a new date instance dynamically with JS let d = new Date(); let newDate = d.getMonth()+'.'+ d.getDate()+'.'+ d.getFullYear(); // configure URL const baseURL = 'http://api.openweathermap.org/data/2.5/weather?zip=', KEY = 'b661986b60f90008fee2e2d52268dd40', ZIP = document.getElementById('zip') let liveZip = null // get zipCode and feelings live (after being typed) ZIP.onkeyup = function(){    liveZip = ZIP.value } feelings.onkeyup = function() {    liveFeeling = feelings.value } // associate click event to the (generate) button send.addEventListener('click', () => {    // checks if zipCode in not empty    if(ZIP.value !== ''){        getWeatherData(baseURL, liveZip, KEY)    }else{        alert('please enter zip code')    } }) // build URL const getWeatherData = async (baseURL, ZIP, KEY) => {    await fetch(`${baseURL}${ZIP}&units=metric&appid=${KEY}`)    .then(response => {        response.json().then(data => {            postData('/addData', {                temp: data.main.temp,                date: newDate,                feelings: liveFeeling            })        })                // set fetched data to HTML        updateUI()    }) } // GET request function const getData = async (url) => {    const res = await fetch(url)        try {        const data = await res.json()        return data    } catch (error) {        console.log("error", error);    } } // POST request function const postData = async (url, data) => {    const response = await fetch(url, {        method: 'POST',        credentials: 'same-origin',        headers: {            'Content-Type': 'application/json',        },        // Body data type must match "Content-Type" header                body: JSON.stringify(data),    });    try {        const newData = await response.json()        return newData    }catch(error){        console.log("error", error);    } } // Update UI function const updateUI = async () => {    const request = await fetch('/allData')    try {        const allData = await request.json()        document.getElementById('temp').innerHTML = allData.temp        document.getElementById('content').innerHTML = allData.feelings        document.getElementById('date').innerHTML = newDate    } catch (error) {        console.log('error', error);    } }

and here the server.js code
// Setup empty JS object to act as endpoint for all routes let projectData = {}; // Require Express to run server and routes const Express = require('express') // Start up an instance of app const app = Express() /* Middleware*/ //Here we are configuring express to use body-parser as middle-ware. const bodyParser = require('body-parser') app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); // Cors for cross origin allowance const cors = require('cors') app.use(cors()) // Initialize the main project folder app.use(Express.static('website')); // Setup Server const PORT = 5555 app.listen(PORT, () => {    console.log(`Server is running on port ${PORT}`) }) // POST route app.post('/addData', (req, res) => {    console.log(req.body);    newEntry = {        temp: req.body.temp,        date: req.body.date,        feelings: req.body.feelings    }    projectData = newEntry }) // GET request for "/allData" route app.get('/allData', (req, res) => {    res.send(projectData) })

[Bear Bibeault]

OK, so diagnosing the problem...

If we look at the line, 88, where the problem is reported, we see allData.temp. The error tells us that allData is undefined at this point. The most likely cause is the endpoint failing or not returning what is expected. It's not an error, because that would have triggered the catch.

So, we want to examine the endpoint. The "Network" tab in Dev Tools is our best friend here. It will show us the result of the endpoint call; its response, status, and so on. Take a gander and see what the endpoint is doing that may be unexpected.

[Hany Taha]

Bear Bibeault wrote:OK, so diagnosing the problem...

If we look at the line, 88, where the problem is reported, we see allData.temp. The error tells us that allData is undefined at this point. The most likely cause is the endpoint failing or not returning what is expected. It's not an error, because that would have triggered the catch.

So, we want to examine the endpoint. The "Network" tab in Dev Tools is our best friend here. It will show us the result of the endpoint call; its response, status, and so on. Take a gander and see what the endpoint is doing that may be unexpected.

Thanks for replying, Bear.
By referring to network tab in devtools, I found that Response of allData is an object like this {"temp":17.04,"date":"11.11.2021","feelings":"1111"}
I hope that helps.

[Bear Bibeault]

Well done. Looks like it's ok. So, setting a breakpoint at line 88, what does allData contain?

[Hany Taha]

Bear Bibeault wrote:Well done. Looks like it's ok. So, setting a breakpoint at line 88, what does allData contain?

I get request: undefined

[Bear Bibeault]

Huh, I would normally say that means the request is failing, but since you got a good response in Dev Tools...

Firstly, I would move the fetch inside the try so that any errors in the request would be caught.

Secondly, verify that you are looking at the right request in Dev Tools (you can clear the console before making the request to make sure you're not looking at stale data).

[Hany Taha]

Bear Bibeault wrote:Huh, I would normally say that means the request is failing, but since you got a good response in Dev Tools...

Firstly, I would move the fetch inside the try so that any errors in the request would be caught.

Secondly, verify that you are looking at the right request in Dev Tools (you can clear the console before making the request to make sure you're not looking at stale data).

I got this response: Response {type: 'basic', url: 'http://localhost:5501/allData', redirected: false, status: 404, ok: false, …}

[Bear Bibeault]

A 404 means that end point was not found. Check your URLL.

[Hany Taha]

Finally, I found my stupid mistake.
I was working on wrong app.js file which was accidentally created by me.
now everything works fine as expected.
I'm so sorry for you guys, specially Bear Bibeault who did great effort trying to find the error in my code wasting a lot of his time for a stupid mistake made by me.
thanks and sorry again.

[Bear Bibeault]

Thanks for `fessing up! But not wasted. Someone might have similar problems in the future and this could be helpful.