I'm currently facing some difficulties connecting to a brewery API (). I am developing a webpage where users can input the city they are visiting and receive a list of breweries in that city. As someone unfamiliar with APIs, I am unsure about the necessary code modifications to display this on my site. Can anyone provide guidance on what might be going awry? Although likely a straightforward solution, I find myself somewhat disoriented at the moment.
const breweryName = document.querySelector(".brewery-name");
function getBrewery(name) {
console.log(data.name);
lat = lat.toString();
lon = lon.toString();
fetch(
'https://api.openbrewerydb.org/breweries?by_city=princeton')
.then((response) => {
response.json().then((data) => {
const brewery = data.brewery;
console.log(brewery);
if (brewery.length === 0) {
const breweryWarning = document.createElement("h3");
breweryWarning.textContent = "Sorry, no breweries in that city!";
breweryList.appendChild(brewerytWarning);
return;
}
brewery.forEach((e) => {
// creating date object and converting it to readable format
let date = luxon.DateTime.fromISO(e.datetime_local).toLocaleString(
luxon.DateTime.DATETIME_MED
);
const breweryItem = document.createElement("li");
const breweryLink = document.createElement("a");
const breweryImage = document.createElement("img");
breweryLink.setAttribute("href", e.url);
breweryImage.setAttribute("src", e.performers[0].images.huge);
breweryLink.setAttribute("class", "event-block");
breweryItem.textContent = `${e.title}- ${date}`;
breweryLink.appendChild(breweryItem);
breweryLink.appendChild(breweryImage);
breweryList.appendChild(breweryLink);
});
});
})
.catch((err) => {
console.log(err.message);
});
}