Atoka Api: Search Companies

by margonar

HTML

<div id='form' class='block-content'>
  <p>
    <label>Token: <input id='input-token' val=''/></label>
  </p>
  <p>
    <label>Ateco: <input id='input-ateco'/></label>
  </p>
  <p>
    <label>Has Email: <input id='input-email' type='checkbox' name='email'/></label>
  </p>
  <p>
    <label>Max Age <small>(months)</small>: <input id='input-age'/></label>
  </p>
  <button>Find Companies</button>
</div>

<div id='results'></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.block-content {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  transition: all 0.2s;
  margin: 30px;
  width: 400px;
}

li {
  text-align: left;
  list-style: none;
  padding-bottom: 20px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

JavaScript

// ATOKA
var atokaUrl = "https://api.atoka.io/v2/companies";

// find elements
var inputToken = $("#input-token");
var inputAteco = $("#input-ateco");
var inputEmail = $("#input-email");
var inputAge = $("#input-age");

// handle click and add class
$("button").on("click", function() {
	$('#results').empty();
  
  // GET request to Atoka Companies Search, with all the filters in input
  $.get(atokaUrl, {
    token: inputToken.val(),
    ateco: inputAteco.val(),
    ageMax: inputAge.val(),
    emails: inputEmail.prop('checked') ? '*': '',
    packages: 'base,contacts',
  }).done(function(data) {
  	let total = data.meta.count;
  
    let results = data.items.map(function(item) {
      // each result has this structure
      // {
      //   "name": "the company name",
      //   "country": "it",
      //   "fullAddress": "address of the registered headuarters",
      //   "id": "internal Atoka identifier"
      // }
		
			var email = '';
      var phone = '';
      var ateco = '';
			
      if (item.contacts && item.contacts.emails) {
      	email = item.contacts.emails[0].address;
      }
      if (item.contacts && item.contacts.phones) {
      	phone = item.contacts.phones[0].number;
      }
      if (item.base && item.base.ateco) {
      	ateco = item.base.ateco[0].code + ' ' + item.base.ateco[0].description;
      }
      
      return $(`<li><h3>${item.name}</h3>
        <small><i>${ateco}</i></small><br />
      	${item.fullAddress}<br/>
        ${email}<br />
        ${phone}<br />
      </li>`);
    });

    var resBlock = $('<ul>').html(results);
    $('#results').addClass('block-content')
    $('#results').append($(`<p>Found ${total} companies</p>`));
    $('#results').append(resBlock);
  });
});