Wanderlust - no "day" object?

Hi - I’m working on steps 33-36 of the Wanderlust project, https://www.codecademy.com/courses/introduction-to-javascript/projects/wanderlust

Step 34 says that part of the response from the getForecast() call should be a “day” object. But below is what I see in the response - lots of objects, but can’t find “day”.

The objects have little arrows by them and I can click those and see what’s nested inside… but still can’t find “day”

{coord: {…}, weather: Array(1), base: “stations”, main: {…}, visibility: 16093, …}

base: “stations”
clouds: {all: 75}
cod: 200
coord: {lon: -84.56, lat: 42.73}
dt: 1569759334
id: 4998830
main: {temp: 284.34, pressure: 1026, humidity: 93, temp_min: 283.15, temp_max: 285.37}
name: “Lansing”
sys: {type: 1, id: 4665, message: 0.0076, country: “US”, sunrise: 1569756772, …}
timezone: -14400
visibility: 16093
weather: [{…}]
wind: {speed: 3.1, deg: 70}
proto: Object

Update: I tried just pasting in what I saw in the hint to step 33 (for if you don’t want to do the step-by-step) and I’m getting an error that says “Cannot read property ‘day’ of undefined”

const renderForecast = (day) => {
    const weatherContent = createWeatherHTML(day);    $weatherDiv.append(weatherContent);
};

Hello, @cukierm. The day could be obtained from the key: value pair dt: 1569759334, but requires conversion. Not sure if that was accounted for after the project was updated to use OpenWeather.
In your getForecast() function, after this line:

const jsonResponse = await response.json();

Could you add a console.log(jsonResponse), and post a screenshot of the output in your console?

Thanks, @midlinder. Here’s what the console looks like now, with console.log statement:

And the expanded object:

Do you agree that you shouldn’t be trying to read properties of undefined?
Maybe there’s some other value somewhere that you meant to read properties from, use that instead, right? Your error message says where you’re doing this.

…oh.

Well, that instruction says where it should be coming from:

You can inspect the day object (the jsonResponse returned from getForecast() )

And that’s something you defined yourself, you’re the one who should have been defining a day. And if you’re not getting something back resembling a day, then you’d revisit your implementation of that function which is steps 20-25

I’ve been looking at how they changed the project to work since they no longer use APIXU, and are now using OpenWeather. I can’t say I like it. If you look at the example of the finished project, and you try to enter a location by City, State, you’ll see the same error in the console. You have to use just City, and you only get 1 day, the current day’s weather. They are still using day as the parameter in the renderForcast() function, but it isn’t a day or date. It is just the jsonResponse. They get the current day using: (new Date()).getDay() in their provided helper function below:

const createWeatherHTML = (currentDay) => {
  console.log(currentDay)
  return `<h2>${weekDays[(new Date()).getDay()]}</h2>
		<h2>Temperature: ${kelvinToFahrenheit(currentDay.main.temp)}&deg;F</h2>
		<h2>Condition: ${currentDay.weather[0].description}</h2>
  	<img src="https://openweathermap.org/img/wn/${currentDay.weather[0].icon}@2x.png">`;
}

@ionatan and whoever else is reading… I may be confused enough that I don’t know how to ask a sensible question here. I was thinking the day object was one of the many key/value pairs contained in the jsonResponse. Are you saying that day is the jsonResponse itself? In any case, I don’t get to control what’s in the jsonResponse - the data comes from openweather.

@midlindner I guess that answers my question above. Thanks for pointing me to the finished project. Somehow I’d been assuming that they wouldn’t have a sample version of this one yet. I’ll start referring to that at the times I need help.

1 Like

I have another super newbie question. I’ve been looking at the main code and at the helper function, and I still can’t figure out how the program “knows” that getForecast is supposed to take the jsonResponse as a parameter. (Like… I’d expect there to be a line that says “getForecast(jsonResponse)” or something.)

getForecast has no parameters.

The instruction says what it is

You do control how it’s obtained, as opposed to it being some predefined value somewhere in some unknown location that needs to be looked/searched for.

getForcast() takes no parameters. If you haven’t made it to the end of the project yet, you’ll eventually be chaining renderForcast() using .then to getForcast(). Doing so passes the return value of getForcast() to renderForcast(). The return value of getForcast() is…

@midlindner Thank you so much for being so patient with me. I had forgotten exactly how “then” worked and I feel like I understand how all the functions in the project fit together much better now.

The helper function provided in the project (in the “helpers.js” file) might need to be updated, unless I’m misunderstanding something. It still refers to the day property of the jsonResponse object:

const createWeatherHTML = (currentDay) => {
  return `<h2> High: ${currentDay.day.maxtemp_f}</h2>
    <h2> Low: ${currentDay.day.mintemp_f}</h2>
    <img src="https://${currentDay.day.condition.icon}" class="weathericon" />
    <h2>${weekDays[(new Date(currentDay.date)).getDay()]}</h2>`;
}

I’m going to try to get the project to work now…

1 Like

The createWeatherHTML() function they use in the finished working example is the one I posted earlier a few posts up. I had added the console.log(currentDay), so I could see the value. It is just the jsonResponse. Anyhow as you’ve stated, there is no day property.

@midlindner Yeah, I just thought it was bad that some code that won’t work with openweather was provided as a helper function. I’ll work on trying to notify someone about that after I’m finished and am sure it won’t work…

Silly question, but how do I see the code for the finished project? I can get to the working version of the app, but am not sure how to get from there to the code. I want to see it because I’m still having trouble. My getForecast function works fine, returns a json object. But when I put a console.log statement to print the parameter that renderForecast takes (day), it says “undefined.” I’m doing this:

  getForecast().then(forecast => renderForecast(forecast));

which as you pointed out should call renderForecast on the jsonResponse, and here’s renderForecast:

const renderForecast = (day) => {
  console.log(day);
    const weatherContent = createWeatherHTML(day);    $weatherDiv.append(weatherContent);
};

So somehow renderForecast is not rendering anything, which explains those “cannot read property of undefined” messages I was getting before. I’m not sure what I’m doing wrong because all my code matches the examples, and none of this actually has to do with the structure of the json object.

From the browser console, select Sources in Chrome or Debugger in Firefox.
Screenshot%20(2)_LI

I’m actually the one who submitted the original ticket regarding APIXU to the Codecademy Engineering team via a portal that SU’s and Mod’s have access to. Once you get it working or not, I’ll refer them to this thread, so they can finish updating the project to work according to the provided instructions.