fetch Json Examples

fetch-json-examples.markdown

fetch Json Examples

A Pen by Bryce S on CodePen.

License.

index.html

<div class="container">
  <div class="row">
    <div class="col-sm-10 mx-auto text-center">
      <div class="card">
        <h2>What City Should You Visit Next</h2>
        <div id="output">??</div>
        <button class="btn btn-primary btn-lg" onclick="displayMatches()"> Roll The Dice</button>
        <br>
<!--         <div id="options">
          <hr>
          <h3>Search Options</h3>
          <p>Population Size?</p>
            <div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1-100,000</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">100,001 - 400,000</label>
</div>
         <div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">400,000+</label>
</div> 
          <hr>
        </div> -->
      </div>
    </div>
  </div>
</div>

<div id="createdBy">
  <p>Created By: bNice | 2019</p>
</div>

script.js

const endpoint =
  "https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json";

const states = [];

fetch(endpoint)
  .then(blob => blob.json())
  .then(data => states.push(...data));


function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

function displayMatches() {
  const rnum = Math.floor(Math.random() * states.length);
  const output = document.querySelector("#output");
  output.innerHTML = states[rnum].city + ', ' + states[rnum].state + '<br> Population: ' + numberWithCommas(states[rnum].population);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js"></script>

style.css

body {
  padding-top: 4em;
  background: #159957;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #155799, #159957);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #155799, #159957); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  font-family: "ZCOOL KuaiLe", cursive;
}

.hidden {
  display: none;
}

#output {
  height: 8rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-size: 1.8em;
  padding: 2rem;
  background: lightgreen;
  margin-bottom: 1rem;
  color: #333;
}

.card {
  padding: 4em;
  background: #eee;
  opacity: .8;
}

#createdBy {
  padding: 2em 0 1rem 3rem;
  color: #fff;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />