https://find-brewery.netlify.app/js/main.js

1//Event listeners to handle selection of state and city for the app
2document.querySelector('#state').addEventListener('change', getState)
3document.querySelector('#city-search').addEventListener('click', getCity)
4
5const limitPerPage=50;
6const apiUrl= "https://api.openbrewerydb.org/breweries";
7
8async function getBreweries(pageNo = 1, state){
9  const actualUrl = apiUrl + `?per_page=${limitPerPage}&page=${pageNo}&by_state=${state}`;
10
11  let apiResults = await fetch(actualUrl)
12  .then(resp=>{
13  return resp.json();
14  });
15  
16  return apiResults;
17  
18  }
19
20  async function getEntireBreweryList(pageNo = 1, state) {
21    const results = await getBreweries(pageNo, state);
22    console.log("Retreiving data from API for page : " + pageNo);
23    if (results.length > 0) {
24      return results.concat(await getEntireBreweryList(pageNo + 1, state));
25    } else {
26      return results;
27    }
28  }
29
30  //getState async function returns the cities for a selected state. It is fired when the select statement is changed to a state
31  async function getState() {
32   //uncomment this for testing --> console.log('change event fired!!');
33    const stateSelect = document.querySelector('#state');
34    const stateChoice = stateSelect.options[stateSelect.selectedIndex].value.toLowerCase();
35    //uncomment this for testing --> console.log(stateChoice);
36    const select = document.querySelector('#city');
37    const entireList = await getEntireBreweryList(1 , stateChoice);
38    //uncomment this for testing --> console.log(entireList);
39
40    // Put the cities for a given state into a list of options the user can select
41    const breweryCities = entireList.map(
42      (obj) => {
43        return obj.city;
44      }
45    ).filter(
46      (item, index, arr) => {
47        return arr.indexOf(item) == index
48      }
49    );
50
51    //If there are options in the the select statement from previous search, get rid of them to replace with new city options
52    const citySelect = document.getElementById("city")
53    for (let i = 1; i < citySelect.length;)
54    {
55      //uncomment this for testing --> console.log('city option array is:' + citySelect.length);
56      citySelect.remove(1)
57    }
58
59    breweryCities.sort();
60     // Put the cities for a given state into a list of options the user can select
61     for(let i=0; i < breweryCities.length; i++) {
62      const option = document.createElement('option');
63      option.value = breweryCities[i];
64      option.innerText = breweryCities[i];
65      select.appendChild(option); 
66    }
67
68    document.querySelector('#city-starter-option').innerText = 'Select a City';
69    //uncomment this for testing --> console.log(breweryCities);
70
71  }
72
73
74function getCity(){
75  const stateChoice = document.querySelector('#state').value;
76  const cityChoice = document.querySelector('#city').value;
77  const pageNum = 1;
78  const table = document.querySelector('#brewery-table');
79
80  const urlCity = `https://api.openbrewerydb.org/breweries?per_page=50&page=${pageNum}&by_state=${stateChoice}&by_city=${cityChoice}`;
81 
82  fetch(urlCity)
83      .then(res => res.json()) // parse response as JSON
84      .then(data => {
85        console.log(data)
86
87        alert('Breweries Retrieved!');
88
89        //Data is an array of brewery objects. Grab all the brewery object key fields to put into html table
90        const breweryObject = data;
91        const breweryProperties = Object.keys(breweryObject);
92        const list = new BreweryList(data);
93        list.showList();
94
95        // console.log(breweryObject);
96        // console.log(breweryProperties);
97
98         const breweryNames = data.map(
99          (obj) => {
100            return obj.name;
101          }
102        );
103
104        document.querySelector('#city-starter-option').innerText = 'Select a City';
105      })
106      .catch(err => {
107          console.log(`error ${err}`)
108      });
109}
110
111
112//Class to hold a list of breweries we retrieve after selecting a city
113class BreweryList {
114  constructor(listData) {
115    this.breweryList = listData
116  }
117
118  //showList will show a list of brewery names along with relevant info (type, address, website, etc)
119  showList() {
120    let tableRef = document.getElementById('brewery-table');
121    for (let i = 1; i < tableRef.rows.length;)
122    {
123      tableRef.deleteRow(i);
124    }
125
126
127    for (let key in this.breweryList) {
128
129      //create a new row with 4 cells in our table for name, type, street, and website
130      let newRow = tableRef.insertRow(-1);
131      let newNCell = newRow.insertCell(0);    //insert new Name Cell into the table
132      let newTCell = newRow.insertCell(1);    //insert new Brewery Type Cell into the table
133      let newSCell = newRow.insertCell(2);    //insert new Street Cell into the table
134      let newSTCell = newRow.insertCell(3);   //insert new State Cell into the table     
135      let newCCell = newRow.insertCell(4);    //insert new City Cell into the table
136      let newWCell = newRow.insertCell(5);    //insert new Website Cell into the table
137
138      //create the text node that will go into our new cells
139      let newNText = document.createTextNode(this.breweryList[key].name);
140      let newTText = document.createTextNode(this.breweryList[key].brewery_type);
141      //let newSText = document.createTextNode(this.breweryList[key].street);
142      let newSTText = document.createTextNode(this.breweryList[key].state);
143      let newCText = document.createTextNode(this.breweryList[key].city);
144      
145
146      //create the text that goes into each of our new cells in our new row in our table
147      newNCell.appendChild(newNText);
148      newTCell.appendChild(newTText);
149      newSTCell.appendChild(newSTText);
150      newCCell.appendChild(newCText);
151
152      if(this.breweryList[key].street === null){
153        let newSText = document.createTextNode('Brewery still in planning stage. Street Address TBD');
154        newSCell.appendChild(newSText);
155      }
156      else {
157        newSCell.appendChild(document.createTextNode(this.breweryList[key].street));
158      }
159
160     //Create a website link for each brewery in our brewery list
161     if(this.breweryList[key].website_url === null){
162      let newWText = document.createTextNode('Website not available');
163      newWCell.appendChild(newWText);
164    }
165    else {
166      let newLink = document.createElement('a');
167      newLink.href = this.breweryList[key].website_url;
168      newLink.title = this.breweryList[key].website_url;
169      newLink.appendChild(document.createTextNode(this.breweryList[key].website_url));
170      newWCell.appendChild(newLink);
171    }
172     
173 
174      console.log(this.breweryList[key].name);
175    }
176  }
177}
178
179//Definition for the Breweryinfo class which holds the data we wish to display to users of the application
180class Breweryinfo {
181  constructor(breweryData) {
182    this.name = breweryData.name,
183    this.type = breweryData.brewery_type,
184    this.street = breweryData.street,
185    this.address2 = breweryData.address_2,
186    this.website = breweryData.website_url,
187    this.state = breweryData.state,
188    this.city = breweryData.city
189  }
190}
191