Wanderlust STEP 16/17 - help deciphering console

Currently working on the Wanderlust Project.
I have come across an error I can’t make sense of. Steps 16/17 read as follows:

Explore the object in the console. There’s a lot of information in there. Let’s save some of that data to a variable called venues . Specifically, follow this nesting chain from the jsonResponse variable to get an array of venue data:

  • the response property (an object)
  • the groups property (an array)
  • the first element of groups
  • the items property (an array of venue data)

Log venues to the console and see what the API sent back. There should be an array with the number of objects you selected in the limit parameter. You’ll only want the venue property inside of these objects. Use .map() to save these venues to the venues array from the previous step.

Add .map(parameter => parameter.valueToStore) to the end of the code from the previous step.

This is the relevant section of code:

const getVenues = async() => { const city = $input.val(); const urlToFetch = `${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20210707`; try { const response = await fetch(urlToFetch); if (response.ok) { console.log(response); const jsonResponse = await response.json(); console.log(jsonResponse); const venues = jsonResponse.reponse.groups[0].items; console.log(venues); } } catch(error) { console.log(error); } }

This is what appears in the console when I type in a city and hit submit:

TypeError: Cannot read property ‘groups’ of undefined
at getVenues (main.js:29)

This is line 29 (from the code snippet above):

const venues = jsonResponse.reponse.groups[0].items;

And for clarity’s sake, below is the console output of code line 28


from the same snippet above:

{meta: {…}, response: {…}}

meta: {code: 200, requestId: “60e53bad1d868456cadf107c”}

geocode: {what: "", where: "olympia", center: {…}, displayString: "Olympia, WA, United States", cc: "US", …}
groups: Array(1)


    items: Array(10)

      0: {reasons: {…}, venue: {…}, referralId: "e-0-4b1c131ef964a520b90124e3-0"}
      1: {reasons: {…}, venue: {…}, referralId: "e-0-58a3c52c4988da3aad06b1b5-1"}
      2: {reasons: {…}, venue: {…}, flags: {…}, referralId: "e-0-4be47c8ed4f7c9b652382420-2"}
      3: {reasons: {…}, venue: {…}, referralId: "e-0-4c93effd58509521311d2565-3"}
      4: {reasons: {…}, venue: {…}, referralId: "e-0-52b26c85498e14bb44d25ec5-4"}
      5: {reasons: {…}, venue: {…}, referralId: "e-0-4be72077cf200f47ee4e153c-5"}
      6: {reasons: {…}, venue: {…}, referralId: "e-0-51544458e4b0a1ba96a2c1b9-6"}
      7: {reasons: {…}, venue: {…}, referralId: "e-0-4b9b1c2cf964a52068f335e3-7"}
      8: {reasons: {…}, venue: {…}, referralId: "e-0-4b89e5cef964a520be5432e3-8"}
      9: {reasons: {…}, venue: {…}, flags: {…}, referralId: "e-0-4bef397bd1b7d13ab884cdec-9"}
      length: 10
      __proto__: Array(0)

    name: "recommended"
    type: "Recommended Places"
    __proto__: Object

  length: 1
  __proto__: Array(0)

headerFullLocation: "Olympia"
headerLocation: "Olympia"
headerLocationGranularity: "city"
suggestedBounds: {ne: {…}, sw: {…}}
suggestedFilters: {header: "Tap to show:", filters: Array(2)}
totalResults: 117
__proto__: Object

I looked at the source code of the example live project that is linked in the introduction to the project and I can’t find anything helpful.


I’m looking for any tips, anything helpful, even a nudge in the right direction would be much appreciated.
Thanks in advance

On line 11

const venues = jsonResponse.reponse.groups[0].items;

response is spelled wrong. that may be your problem

After you’ve corrected the typo that @zeko0o picked up…

…you just need to finish step 17 by using the .map method to save only the venues from the response data into the venues variable.

I’ve got the same problem going on. I’ve gotten to step 24 and nothing’s showing up and when I went back and checked the developer console, keeps giving me a “TypeError: Cannot read property ‘groups’ of undefined
at getVenues (main.js:28)”

I’ve gone over my code with a fine-toothed comb, comparing it to that in the hints and other people’s on these forums, so I know I don’t have any spelling mistakes, and since I’ve gone farther I know that adding “.map(item => item.venue);” doesn’t change either my output nor my error.

Does anyone know why the ‘groups’ property is returning an error? Has the way the project works been changed at all? I’ve also been looking at the Example with the developer console on and can’t find any differences in code, yet the example works fine while mine stays blank and throws an error.

If anyone could explain this I’d be super grateful!

All I’m going to say is I had one little thing spelled incorrectly. I eventually found it - I suppose I should have come back here and said that. What I ended up doing was going back and commenting out parts of the code section by section til I found where the error was.

IMPORTANT: My issue wasn’t a “typo”… nothing was spelled wrong - the actual wording/term in the line was wrong - so things weren’t being passed correctly