Simple Fetch

get data from a webservice. Fails with an "Unexpected end of input" error.

by Matt Rummler

HTML

<section id="messageUI" class="landingpageform">
  <ul class="unmarkedList">
    <li>
      <input list="cannedmessages" id="messages" value=" " placeholder="use the keyboard below">
      <datalist id="cannedmessages">

        <option id="0" value="hi">
        <option id="1" value="bye">
        <option id="2" value="how are you?">
        <option id="3" value="call">
        <option id="4" value="text">

      </datalist>
  <!--
    <li class="inputs">
    </li>
    <li id='Messages'>
    </li>
    <li>
      <div id="keybord" class="font10more">
        <span id="kb_rowo" class="flex frow kbd">
          <button class="kbdkey">1</button>
          <button class="kbdkey">2</button>
          <button class="kbdkey">3</button>
          <button class="kbdkey">4</button>
          <button class="kbdkey">5</button>
          <button class="kbdkey">6</button>
          <button class="kbdkey">7</button>
          <button class="kbdkey">8</button>
          <button class="kbdkey">9</button>
          <button class="kbdkey">0</button>
        </span>
        <span id="kb_row1" class="flex frow kbd">
          <button class="kbdkey">q</button>
          <button class="kbdkey">w</button>
          <button class="kbdkey">e</button>
          <button class="kbdkey">r</button>
          <button class="kbdkey">t</button>
          <button class="kbdkey">y</button>
          <button class="kbdkey">u</button>
          <button class="kbdkey">i</button>
          <button class="kbdkey">o</button>
          <button class="kbdkey">p</button>
        </span>
        <span id="kb_row2" class="flex frow kbd">
          <button class="kbdkey">a</button>
          <button class="kbdkey">s</button>
          <button class="kbdkey">d</button>
          <button class="kbdkey">f</button>
          <button class="kbdkey">g</button>
          <button class="kbdkey">h</button>
          <button class="kbdkey">j</button>
          <button...

CSS

.flex
{
  display: flex;
}
.frow
{
  flex-flow: row;
}
.fcolumn
{
  flex-flow: column;
}
ul[class*=unmarkedList]
{
    list-style-type:none;
    border: none;
    text-align: left;
    padding-top: 15px;
}
.messagebox
{
  min-height: 4em;
  min-width: 6em;
  max-width: 35em;
  box-shadow: inset 1px 1px 3px 3px rgba( 0,0,0,0.3 );
  margin: 1px;
}

JavaScript

var urlVar = 'https://cloudwist.com/dataService/dts.snippet.php'+'?'+'contentType=lookups&operationType=get&lookupForm=Cannedmessages';

var responseObj = fetch(urlVar,{method:'get',redirect:'follow',mode:'no-cors'})  
.then
  (
    function (response)
    {
    	response.json()
      .then
      (
        function(data)
        {
          console.log(data.results);
        }
      //if(response.ok){console.log('the fetch was successful.'); return response;} 
      //else{return response.error;}
    	)
    }
  )
.catch
  (
    function(err){console.log(err); return err;}
  );

console.log(responseObj);
  
/* */ 
function fetchStuff(event,method)
{
  alert('the beginning of fetchStuff()');
  console.log(event.target);
  function createGetString(cmFormDataObj)
  {
    let getString = '?';
    for(let kvpair of cmFormDataObj)
    {
      if(getString.length == 1)
      {
        getString+kvpair[0]+'='+kvpair[1];
      }
      else
      {
        getString+'&'+kvpair[0]+'='+kvpair[1];
      }
    }
    return getString;
  }
  cmFormDataObj = new FormData(cmForm);
  cmFormDataObj.append('MessageString',cmHiddenInput.innerText);
  cmFormDataObj.append('operationType','get');
  headerObj = new Headers({'Content-Type': 'application/json'});
  fetch(urlVar+createGetString(cmFormDataObj),{method:method,redirect:'follow',headers:headerObj,mode:'no-cors'})//,body:cmFormDataObj})
.then
  (
    function (response)
    {
      if(response.ok){console.log('the fetch was successful.'); return response;} 
      else{return response.error();}
    }
  )
  //can do chaining with multiple .then claueses if desired/useful
//  .then
//  (
//    function (response){}
//  )
  .catch
  (
    function(err){console.log(err); return err;}
  );
}
/**/