CODEWITHSUNDEEP
javascriptfetch-api
mbert86
mbert86

Reputation: 13

How can I get the search results to clear and refresh when entering a new item?

https://codepen.io/matthewbert86/pen/pogdEvB

http://beer-food.surge.sh/

I am working on a little search app. It pulls up the beer pairing results based on what food you type in. My problem is that after I get results once, it wont clear out, and the same results stay up for anything I try to enter after that. Ive been messing with it for a long time and no luck. Any suggestions?

// Step 1 - assign elements from HTML and assign it to javascript variables
const btnSearch = document.getElementById('btnSearch');
const txtSearch = document.getElementById('food');
const resultArea = document.getElementById('result');
// This is where we will store out output as its process 
let out = "";

// an onclick function runs when the button is clicked
btnSearch.onclick = function() {
  // this returns the user input from the searchbar
  var searchTerm = txtSearch.value;
  const url = `https://api.punkapi.com/v2/beers?food=${searchTerm}`
  console.log(url);
  // fetch will go to the url
  fetch(url)
    .then(function(data) {
      // return jsonObject from the url
      return data.json();
    })
    .then(function(jsonObject) {
      console.log(jsonObject);
      for (beer in jsonObject) {
        const beerInfo = new Array(jsonObject[beer].name, jsonObject[beer].tagline, jsonObject[beer].description, jsonObject[beer].image_url)
        beerOut(beerInfo);
      }
      resultArea.innerHTML = out;
    })
    .catch(function(e) {
      console.log("Error: " + e);
    });
}

// This function we will use logic to take the array from beerOut and display it in HTML using template literals
function beerOut(beer) {
  console.log(beer);
  out += `<div class="beer">
    <div class="beerImage"><img src="${beer[3]}"/></div>
    <div class="beerText">
        <h2>${beer[0]}</h2>
        <h3>${beer[1]}</h3>
        <p><em>${beer[2]}</em></p>
        </div><!--beerText-->
        </div><!--beer-->
    `
  //This will go back to the resultArea.innerHTML = out; to display on the main page
}
#food {
  width: 50%;
  margin: 0 25%;
  border: 3px solid black;
  border-radius: 5px;
  background-color: white;
  -webkit-box-shadow: 10px 13px 30px -19px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 10px 13px 30px -19px rgba(0, 0, 0, 0.5);
  box-shadow: 10px 13px 30px -19px rgba(0, 0, 0, 0.5);
  display: flex;
  text-align: center;
}

.text-input,
.text-input--underbar {
  font: inherit;
  vertical-align: top;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
  box-shadow: none;
  padding: 20px;
  width: auto;
  height: 31px;
  border: none;
  margin: 0;
  outline: 0;
}

#container {
  margin: 5px;
}

#btnSearch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  font-size: 30px;
  padding: 10px 10px;
  text-align: center;
  margin: 0 auto;
}

.beer {
  border: 1px solid black;
  margin: 5px;
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 5px;
  background-color: white;
  -webkit-box-shadow: 10px 13px 30px -19px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 10px 13px 30px -19px rgba(0, 0, 0, 0.5);
  box-shadow: 10px 13px 30px -19px rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: space-between;
}

.beerImage {
  padding: 30px;
  width: 50px;
  /*order: 1;*/
}

.beerImage img {
  width: 60px;
}

.beerText {
  width: 85%;
  padding: 20px;
}
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>

<body>
  <ons-page>
    <ons-toolbar>
      <div class="center">Beer & Food Pairings</div>
    </ons-toolbar>
    <section id="container">
      <p>
        <ons-input id="food" modifier="underbar" placeholder="enter a food to pair">
        </ons-input>
      </p>
      <p>
        <ons-button modifier="medium" id="btnSearch">Search</ons-button>
      </p>
      <div id="result"></div>
    </section>
  </ons-page>

Upvotes: 0

Views: 1071

Answers (1)

mplungjan
mplungjan

Reputation: 178413

You saved the out

Here I clear the potential containers and add a random to the url to make sure it is not cached

btnSearch.onclick = function() {
  out = "";

I search for "ale" and get result and "lager" and get none

// Step 1 - assign elements from HTML and assign it to javascript variables
const btnSearch = document.getElementById('btnSearch');
const txtSearch = document.getElementById('food');
const resultArea = document.getElementById('result');
// This is where we will store out output as its process 

let out = "";
// an onclick function runs when the button is clicked
btnSearch.onclick = function() {
  out = "";
  resultArea.innerHTML = "Please wait...";
  jsonObject = ""
  // this returns the user input from the searchbar
  var searchTerm = txtSearch.value;
  const url = `https://api.punkapi.com/v2/beers?food=${searchTerm}&rdn=${new Date().getTime()}`
  console.log(url);
  // fetch will go to the url
  fetch(url)
    .then(function(data) {
      // return jsonObject from the url
      return data.json();
    })
    .then(function(jsonObject) {
      console.log(jsonObject);
      for (beer in jsonObject) {
        const beerInfo = new Array(jsonObject[beer].name, jsonObject[beer].tagline, jsonObject[beer].description, jsonObject[beer].image_url)
        beerOut(beerInfo);
      }
      resultArea.innerHTML = out;
    })
    .catch(function(e) {
      console.log("Error: " + e);
    });
}

// This function we will use logic to take the array from beerOut and display it in HTML using template literals
function beerOut(beer) {
  console.log(beer);
  out += `<div class="beer">
    <div class="beerImage"><img src="${beer[3]}"/></div>
    <div class="beerText">
        <h2>${beer[0]}</h2>
        <h3>${beer[1]}</h3>
        <p><em>${beer[2]}</em></p>
        </div><!--beerText-->
        </div><!--beer-->
    `
  //This will go back to the resultArea.innerHTML = out; to display on the main page
}
#food {
  width: 50%;
  margin: 0 25%;
  border: 3px solid black;
  border-radius: 5px;
  background-color: white;
  -webkit-box-shadow: 10px 13px 30px -19px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 10px 13px 30px -19px rgba(0, 0, 0, 0.5);
  box-shadow: 10px 13px 30px -19px rgba(0, 0, 0, 0.5);
  display: flex;
  text-align: center;
}

.text-input,
.text-input--underbar {
  font: inherit;
  vertical-align: top;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
  box-shadow: none;
  padding: 20px;
  width: auto;
  height: 31px;
  border: none;
  margin: 0;
  outline: 0;
}

#container {
  margin: 5px;
}

#btnSearch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  font-size: 30px;
  padding: 10px 10px;
  text-align: center;
  margin: 0 auto;
}

.beer {
  border: 1px solid black;
  margin: 5px;
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 5px;
  background-color: white;
  -webkit-box-shadow: 10px 13px 30px -19px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 10px 13px 30px -19px rgba(0, 0, 0, 0.5);
  box-shadow: 10px 13px 30px -19px rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: space-between;
}

.beerImage {
  padding: 30px;
  width: 50px;
  /*order: 1;*/
}

.beerImage img {
  width: 60px;
}

.beerText {
  width: 85%;
  padding: 20px;
}
<!doctype html>
<html>
<head>
<title>Search</title>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>

</head>

<body>
  <ons-page>
    <ons-toolbar>
      <div class="center">Beer & Food Pairings</div>
    </ons-toolbar>
    <section id="container">
      <p>
        <ons-input id="food" modifier="underbar" placeholder="enter a food to pair">
        </ons-input>
      </p>
      <p>
        <ons-button modifier="medium" id="btnSearch">Search</ons-button>
      </p>
      <div id="result"></div>
    </section>
  </ons-page>

Simpler version - I fixed your missing image

function beerOut(jsonObject) {
  return jsonObject.map(item => {
    const {name, tagline, description, image_url} = item;
    return `<div class="beer">
    <div class="beerImage"><img src="${image_url || 'https://i.ya-webdesign.com/images/wine-bottle-silhouette-png-14.png'}"/></div>
    <div class="beerText">
        <h2>${name}</h2>
        <h3>${tagline}</h3>
        <p><em>${description}</em></p>
        </div><!--beerText-->
        </div><!--beer-->
    `;
  })
}


// Step 1 - assign elements from HTML and assign it to javascript variables
const btnSearch = document.getElementById('btnSearch');
const txtSearch = document.getElementById('food');
const resultArea = document.getElementById('result');
// This is where we will store out output as its process 

// an onclick function runs when the button is clicked
btnSearch.addEventListener("click",function() {
  resultArea.innerHTML = "Please wait...";
  // this returns the user input from the searchbar
  var searchTerm = txtSearch.value;
  const url = `https://api.punkapi.com/v2/beers?food=${searchTerm}&rdn=${new Date().getTime()}`;
  console.log(url);
  // fetch will go to the url
  fetch(url)
    .then(function(data) {
      return data.json();
    })
    .then(function(jsonObject) {
      resultArea.innerHTML = beerOut(jsonObject);
    })
    .catch(function(e) {
      console.log("Error: " + e);
    });
})

// This function we will use logic to take the array from beerOut and display it in HTML using template literals
function beerOut(jsonObject) {
  return jsonObject.map(item => {
    const {name, tagline, description, image_url} = item;
    return `<div class="beer">
    <div class="beerImage"><img src="${image_url || 'https://i.ya-webdesign.com/images/wine-bottle-silhouette-png-14.png'}"/></div>
    <div class="beerText">
        <h2>${name}</h2>
        <h3>${tagline}</h3>
        <p><em>${description}</em></p>
        </div><!--beerText-->
        </div><!--beer-->
    `;
  })
}
#food {
  width: 50%;
  margin: 0 25%;
  border: 3px solid black;
  border-radius: 5px;
  background-color: white;
  -webkit-box-shadow: 10px 13px 30px -19px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 10px 13px 30px -19px rgba(0, 0, 0, 0.5);
  box-shadow: 10px 13px 30px -19px rgba(0, 0, 0, 0.5);
  display: flex;
  text-align: center;
}

.text-input,
.text-input--underbar {
  font: inherit;
  vertical-align: top;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
  box-shadow: none;
  padding: 20px;
  width: auto;
  height: 31px;
  border: none;
  margin: 0;
  outline: 0;
}

#container {
  margin: 5px;
}

#btnSearch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  font-size: 30px;
  padding: 10px 10px;
  text-align: center;
  margin: 0 auto;
}

.beer {
  border: 1px solid black;
  margin: 5px;
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 5px;
  background-color: white;
  -webkit-box-shadow: 10px 13px 30px -19px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 10px 13px 30px -19px rgba(0, 0, 0, 0.5);
  box-shadow: 10px 13px 30px -19px rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: space-between;
}

.beerImage {
  padding: 30px;
  width: 50px;
  /*order: 1;*/
}

.beerImage img {
  width: 60px;
}

.beerText {
  width: 85%;
  padding: 20px;
}
<!doctype html>
<html>

<head>
  <title>Search</title>
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>

</head>

<body>
  <ons-page>
    <ons-toolbar>
      <div class="center">Beer & Food Pairings</div>
    </ons-toolbar>
    <section id="container">
      <p>
        <ons-input id="food" modifier="underbar" placeholder="enter a food to pair">
        </ons-input>
      </p>
      <p>
        <ons-button modifier="medium" id="btnSearch">Search</ons-button>
      </p>
      <div id="result"></div>
    </section>
  </ons-page>

Upvotes: 1

Related Questions