Fetch Example: time2hack.com

fetch-example-time2hack-com.markdown

Fetch Example: time2hack.com

A Pen by Pankaj Patel on CodePen.

License.

index.html

<div class="container">
  <header>
    <h1>Fetch Example</h1>
  </header>
  <hr/>
  <div class="row">
  <div class="col-sm-8">
    <div class="form-group">
      <label for="endpoint">Endpoint</label>
      <input type="text" readonly value="https://jsonplaceholder.typicode.com/posts" class="form-control" id="endpoint" >
    </div>    
  </div>
  <div class="col-sm-4">
    <div class="form-group">
      <label for="method">Method</label>
      <select class="form-control" id="method">
        <option>POST</option>
        <option>GET</option>
      </select>
    </div>  
  </div>
  </div>
  
  <div class="form-group fields-group">
    <label >Fields: <button type="button" id="add" class="btn btn-outline-info btn-sm">Add Field</button></label>
    <table id="fields" class="table table-bordered table-sm">
      <thead>
        <tr>
          <th>Key</th>
          <th>Value</th>
          <th>Remove</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="text" class="form-control key" placeholder="Key"></td>
          <td><input type="text" class="form-control value" placeholder="Value" /></td>
          <td>
            <button type="button" class="btn btn-outline-danger remove">Remove</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div>
    <button type="button" class="btn btn-outline-primary btn-lg" id="send">Send</button>
    <span class="d-none" id="status">
      <svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M19,8L15,12H18A6,6 0 0,1 12,18C11,18 10.03,17.75 9.2,17.3L7.74,18.76C8.97,19.54 10.43,20 12,20A8,8 0 0,0 20,12H23M6,12A6,6 0 0,1 12,6C13,6 13.97,6.25 14.8,6.7L16.26,5.24C15.03,4.46 13.57,4 12,4A8,8 0 0,0 4,12H1L5,16L9,12"></path>
</svg>
    </span>
    <small class="form-text text-muted">Empty keys won't be sent</small>
  </div>
  <hr/>
  <div class="response">
    <div class="row">
      <div class="col-sm-8">
        <h4>Response:</h4>
        <pre id="result" class="border border-primary rounded"></pre>        
      </div>
      <div class="col-sm-4">
        <h4>Request:</h4>
        <pre id="request" class="border border-primary rounded"></pre>
      </div>
    </div>
  </div>
</div>

script.babel

const input = name => `<input type="text"
  class="form-control ${name.toLowerCase()}" placeholder="${name}" />`;

const fieldTpl = data => `
<tr>
  <td>${input("Key")}</td>
  <td>${input("Value")}</td>
  <td><button type="button" class="btn btn-outline-danger remove">Remove</button></td>
</tr>
`;
document.querySelector("#add").addEventListener("click", e => {
  $append(fieldTpl(), document.querySelector("#fields tbody"));
});

document.querySelector("#method").addEventListener("change", e => {
  const val = document.querySelector("#method").value;
  document
    .querySelector(".fields-group")
    .classList[val === "GET" ? "add" : "remove"]("d-none");
});

document.querySelector("#fields").addEventListener("click", e => {
  if (e.target.classList.contains("remove")) {
    e.target.parentElement.parentElement.remove();
  }
});

const getKeyValues = () => {
  const keys = document.querySelectorAll('.key');
  const values = document.querySelectorAll('.value');
  let obj = {};
  keys.forEach((key, index) => {
    if(key.value !== '') {
      obj[key.value] = values[index].value;
    }
  });
  return obj;
}

document.querySelector("#send").addEventListener("click", e => {
  document.querySelector("#send").classList.add('d-none')
  document.querySelector("#status").classList.remove('d-none')
  const url = "https://jsonplaceholder.typicode.com/posts";
  const method = document.querySelector("#method").value;
  let reqConf = {method};
  if(method === 'POST') {
    const headers = new Headers();
    headers.append("Content-Type", "application/json");
    let body = getKeyValues();
    
    reqConf = Object.assign({}, {
      headers, 
      body: JSON.stringify(body),
    }, reqConf);
  }
  const request = new Request(url, reqConf)
  document.querySelector('#request').innerHTML = JSON.stringify(request, replacer, 2);
  fetch(request)
    .then(response => response.json())
    .then(data => {
      document.querySelector("#send").classList.remove('d-none')
      document.querySelector("#status").classList.add('d-none')
      document.querySelector('#result').innerHTML = JSON.stringify(data, replacer, 2);
  });
});

const $append = (markup, parent) => {
  const temp_container = document.createElement('tbody');
  temp_container.innerHTML = markup;
  while (temp_container.firstChild) {
    parent.appendChild(temp_container.firstChild);
  }
};
function replacer(key, value) {
  // Filtering out properties
  if (value instanceof Request) {
    return ['method', 'url', 'headers', 'referrer', 'mode', 'body'].reduce((acc, key) => {
      acc[key] = replacer(key, value[key]);
      return acc;
    }, {});
  }
  if (value instanceof Headers) {
    const i = value.entries()
    console.log(i)
    const ret = {};
    let v = null;
    do {
      if(v) {
        ret[v.key] = v.value;
      }
      v = i.next();
    } while(v)
    return value.entries();
  }
  return value;
}

style.css

#result, #request {
  padding: 10px;
  max-height: 500px;
  overflow: auto;
}
header {
  padding-top: 10px; 
}
#status svg{
    animation: spin infinite 2s linear;
}
@keyframes spin {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

styles

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