Error: Event is not a function

[irishjack490]

What's the problem you're trying to solve?

When I try to render the API events on my index page, I get a message saying that events is not a function, on the API however, events looks like it is an array of objects

Post any code you think might be relevant (one fenced block per file)

Code events/index.ejs

<%- include('../partials/header') %>

<div class="container center">
    <div class="container row text-center">

        <% events.forEach(function(e) { %>
          <div class="card mt-3 me-3 eventCard">
              <img src="<%= e.category %>" alt="url of event" class="card-img-top mt-3">
                <div class="card body">
                    <h5 class="card-title"><%= e.name %></h5>
                </div>
        <%}) %>  
    </div>
  </div>

<%- include('../partials/footer') %>

Here is what I have in eventsController:

///Import Dependencies///
const express = require('express');
const axios = require('axios');
///Create Router/////
const router = express.Router();
const allEventsUrl = process.env.EVENT_API_URL;

/////Routes+Controllers/////
// GET -> /events/all
// gives us all events in the api for an index
router.get('/all', (req, res) => {
    const { username, loggedIn, userId } = req.session
    //make our api call
    axios(allEventsUrl)
        // if we get data, render an index page
        .then(apiRes => {
            console.log('this came back from the api: \n', apiRes.data)
            // apiRes.data is an array of events objects 
            //res.send(apiRes.data)
            res.render('events/index', { events: apiRes.data, username, userId, loggedIn})
        })
        // if something goes wrong, display an error page
        .catch(err => {
            console.log('error')
            res.redirect(`/error?error=${err}`)
        })
})
//GET events/:name 
module.exports = router; 

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

Error saying events is not an array but from what I can see, it is an array of objects

What is your best guess as to the source of the problem?

Not sure

What things have you already tried to solve the problem?

I tested this ejs code to see if it would tell me that events is not an array, I got a result saying it is not an array

<div class="container center">
  <div class="container row text-center">
    <% if (Array.isArray(events)) { %>
      <% events.forEach(function(e) { %>
        <div class="card mt-3 me-3 eventCard">
          <% if (e && e.category) { %>
            <img src="<%= e.category %>" alt="url of event" class="card-img-top mt-3">
            <!-- Additional properties or content here -->
          <% } else { %>
            <p>Error: Missing 'category' property in event data.</p>
          <% } %>
        </div>
      <% }); %>
    <% } else { %>
      <p>Error: 'events' is not an array.</p>
    <% } %>
  </div>
</div>

Paste a link to your repository here

https://github.com/irishjack490/Project2-Social-Events-App

Thank you sincerely

[timmshinbone]

Can you share a screenshot of the actual error message?

[timmshinbone]

Are your events coming from an API or are they coming from your database?

[irishjack490]

My events are coming from an API...I am seeing this error when I run nodemon on my app :/ I was going to have them come from my database initially but I wanted to practice with APIs, I kinda modified the original plan.. would that be ok?

[timmshinbone]

what does this console log show in the terminal?

console.log('this came back from the api: \n', apiRes.data)

[irishjack490]

Here is the result from terminal (there are more events but only included 3 to make it shorter)

this came back from the api:
 {
  events: [
    {
      type: 'mls',
      id: 6077353,
      datetime_utc: '2023-12-31T09:30:00',
      venue: [Object],
      datetime_tbd: true,
      performers: [Array],
      is_open: true,
      links: [],
      datetime_local: '2023-12-31T03:30:00',
      time_tbd: true,
      short_title: '2024 myCITY+ Membership',
      visible_until_utc: '2024-12-31T06:00:00',
      stats: [Object],
      taxonomies: [Array],
      url: 'https://seatgeek.com/st-louis-city-sc-3-tickets/mls/2023-12-31-3-30-am/6077353',
      score: 0,
      announce_date: '2023-01-17T00:00:00',
      created_at: '2023-06-28T15:03:44',
      date_tbd: true,
      title: '2024 myCITY+ Membership',
      popularity: 0,
      description: '',
      status: 'normal',
      access_method: [Object],
      event_promotion: null,
      announcements: {},
      conditional: false,
      enddatetime_utc: '2024-12-31T06:00:00',
      visible_at: '2023-09-01T05:00:00Z',
      is_visible_override: 'UNSET',
      tdc_pvo_id: 0,
      tdc_pv_id: 0,
      is_visible: true,
      performer_order: [],
      general_admission: true,
      themes: [],
      domain_information: []
    },
    {
      type: 'rodeo',
      id: 6187162,
      datetime_utc: '2024-01-05T08:30:00',
      venue: [Object],
      datetime_tbd: false,
      performers: [Array],
      is_open: false,
      links: [],
      datetime_local: '2024-01-05T03:30:00',
      time_tbd: true,
      short_title: 'PBR: Unleash the Beast - 3 Day Pass',
      visible_until_utc: '2024-01-06T05:00:00',
      stats: [Object],
      taxonomies: [Array],
      url: 'https://seatgeek.com/pbr-professional-bull-riders-tickets/rodeo/2024-01-05-3-30-am/6187162',
      score: 0.477,
      announce_date: '2023-09-19T00:00:00',
      created_at: '2023-09-19T14:26:14',
      date_tbd: false,
      title: 'PBR: Unleash the Beast - 3 Day Pass',
      popularity: 0.794,
      description: '',
      status: 'normal',
      access_method: [Object],
      event_promotion: null,
      announcements: {},
      conditional: false,
      enddatetime_utc: null,
      visible_at: null,
      is_visible_override: 'VISIBLE',
      tdc_pvo_id: 0,
      tdc_pv_id: 0,
      is_visible: true,
      performer_order: [],
      themes: [],
      domain_information: []
    },
    {
      type: 'rodeo',
      id: 6188172,
      datetime_utc: '2024-01-05T08:30:00',
      venue: [Object],
      datetime_tbd: false,
      performers: [Array],
      is_open: false,
      links: [],
      datetime_local: '2024-01-05T03:30:00',
      time_tbd: true,
      short_title: 'PBR: Velocity Tour - 2 Day Pass',
      visible_until_utc: '2024-01-06T05:00:00',
      stats: [Object],
      taxonomies: [Array],
      url: 'https://seatgeek.com/pbr-professional-bull-riders-tickets/rodeo/2024-01-05-3-30-am/6188172',
      score: 0.542,
      announce_date: '2023-09-19T00:00:00',
      created_at: '2023-09-19T20:22:22',
      date_tbd: false,
      title: 'PBR: Velocity Tour - 2 Day Pass',
      popularity: 0.827,
      description: '',
      status: 'normal',
      access_method: [Object],
      event_promotion: null,
      announcements: {},
      conditional: false,
      enddatetime_utc: null,
      visible_at: null,
      is_visible_override: 'VISIBLE',
      tdc_pvo_id: 0,
      tdc_pv_id: 0,
      is_visible: true,
      performer_order: [],
      themes: [],
      domain_information: []
    },
    {
      type: 'ncaa_basketball',
      id: 6250981,
      datetime_utc: '2024-01-05T08:30:00',
      venue: [Object],
      datetime_tbd: false,
      performers: [Array],
      is_open: false,
      links: [],
      datetime_local: '2024-01-05T03:30:00',
      time_tbd: true,
      short_title: 'Niagara at Manhattan',
      visible_until_utc: '2024-01-06T05:00:00',
      stats: [Object],
      taxonomies: [Array],
      url: 'https://seatgeek.com/manhattan-jaspers-mens-basketball-tickets/ncaa-basketball/2024-01-05-3-30-am/6250981',
      score: 0.303,
      announce_date: '2023-10-25T00:00:00',
      created_at: '2023-10-25T18:28:22',
      date_tbd: false,
      title: 'Niagara Purple Eagles at Manhattan Jaspers Mens Basketball',
      popularity: 0.707,
      description: '',
      status: 'normal',
      access_method: null,
      event_promotion: null,
      announcements: {},
      conditional: false,
      enddatetime_utc: null,
      visible_at: null,
      is_visible_override: 'VISIBLE',
      tdc_pvo_id: 0,
      tdc_pv_id: 0,
      is_visible: true,
      performer_order: [],
      themes: [],
      domain_information: []
    },

[timmshinbone]

That means this line in your controller:

events: apiRes.data

needs to say this:

events: apiRes.data.events

[irishjack490]

Thank you, that worked like magic!, now I need to edit the style... very much appreciated