Hi folks! I’ve been working on a module to display concerts coming up in my area in the next week using the seatgeek API. I’m not sure why the module will not display now that I’ve added it to the config. I think the code makes sense. Any advice would be greatly appreciated, I’m pasting my getDom function below: getDom: function() { var wrapper = document.createElement("div"); // create the table element const table = document.createElement('table'); var self = this; // set variable for today const today = luxon.DateTime.utc().toISODate(); // set variable for a week from today const oneweek = luxon.DateTime.utc().plus({ weeks: 1 }).toISODate(); // this is the API call url var url = "http://api.seatgeek.com/2/events?lat=" + self.config.latitude + "&lon=" + self.config.longitude + "&per_page=" + self.config.eventCount + "&datetime_utc.gte=" + today + "&datetime_utc.lte=" + oneweek + "&range=" + self.config.range + "&type=concert" + "&client_id=" + self.config.apiKey; // fetching the data from seatgeek fetch(url) // parse the json response into a JS object .then((response) => response.json()) // then populate a table with the data .then(data => { // define the table headers const headerRow = table.insertRow(); const artisthead = headerRow.insertCell(0); artisthead.innerHTML = 'Artist'; const datetimehead = headerRow.insertCell(1); datetimehead.innerHTML = 'Date & Time'; const cityhead = headerRow.insertCell(2); cityhead.innerHTML = 'City'; const venuehead = headerRow.insertCell(3); venuehead.innerHTML = 'Venue' // loop through the data and create row for each item for (let i = 0; i < self.config.eventCount && i < data.events.length; i++) { const row = table.insertRow(); // populte the cells with data from the API response const artist = row.insertCell(0); artist.innerHTML = data.events[i].performers[0].name; const datetime = row.insertCell(1); datetime.innerHTML = data.events[i].datetime_local; const city = row.insertCell(2); city.innerHTML = data.events[i].venue.city; const venue = row.insertCell(3); venue.innerHTML = data.events[i].venue.name; } // add this table to the wrapper wrapper.appendChild(table); }) .catch(function() { // if the API call is unsuccessful, display error message wrapper.innerHTML = "Error calling data to display event information"; }); return wrapper; },

@ sdetweil I got a new console error:

Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you have been placed in read-only mode.

Please download a browser that supports JavaScript, or enable it if it's disabled (i.e. NoScript).

A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Testing my module, it is stuck loading

Solved Troubleshooting

31 Posts 2 Posters 7.9k Views 2 Watching

S Online

sdetweil @l0zarus
last edited by May 8, 2023, 2:31 AM

@l0zarus woohoo… thx for the feedback
Sam

How to add modules

learning how to use browser developers window for css changes
1 Reply Last reply
Reply Quote 0

Enjoying MagicMirror? Please consider a donation!