<div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
        <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#" onclick="origin()">Action</a>
                  <a class="dropdown-item" href="#" onclick="formOrigin()">Another action</a>
       </div>
       <div>
          <table class="table"></table>
       </div>
       <div>
          <form>
            <div class="form-group">
              <label for="name">Name</label>
              <input type="text" class="form-control" id="name" placeholder="Enter name">
            </div>
            <div class="form-group">
               <label for="city">City</label>
               <input type="text" class="form-control" id="city" placeholder="city">
            </div>
            <div class="form-group form-check">
               <input type="checkbox" class="form-check-input" id="add">
               <label class="form-check-label" for="add">Check</label>
            </div>
             <button type="submit" class="btn btn-primary">Submit</button>
          </form>

       </div>

function origin() {

        var url = "http://localhost:8000/api/v1/origin";
        petition.onreadystatechange = ResponseOrigin;
        petition.open("GET", url, true);
        petition.send();
        }

    function ResponseOrigin(){
        var response;
        text="<tr><th>Identifier</th><th>Name</th><th>Numero</th><th>City</th></tr>";
                if (petition.readyState == 4)
                    if (petition.status == 200) {
                        responser = petition.responseText;
                        var responseC = response.split("<");
                        var responseV = responseC[0];
                        var data = JSON.parse(responseV);
                        for (var i = 0; i < data.length; i++) {

                                text += "<tr id =" + data[i].id + "><td>" + data[i].id + "</td><td id='name'>" + data[i].name + "</td><td>" +
                                data[i].city + "</td>";

                        document.getElementById('table').innerHTML = text;

                        document.formOrigin.style.display="none";
                    }
                    else alert("Problem with URL");
            }

     function formOrigin() {


         var url = "http://localhost:8000/api/v1/origin";
            petition.onreadystatechange = responseAddOrigin;
            petition.open("POST", url, true);
            petition.send(JSON.stringify({name: document.formOrigin.name.value,
                city: document.formOrigin.city.value}));

       }
      function responseAddOrigen(){

            var response;
            if (petition.readyState == 4)
                if (petition.status == 200) {
                    response = petition.responseText;
                    alert ("data recorded correctly");
                }
                else
                    alert("Problem with URL");
        }

text += "<tr id =" + data[i].id + "><td>" + data[i].id + "</td><td id='name'>" + data[i].name + "</td><td>" +
 data[i].city + "</td> -->";<--