<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Creacion de Json</title>
    <link
      rel="stylesheet"
      href="https://bootswatch.com/5/solar/bootstrap.min.css"
    />
    <script
      type="text/javascript"
      src="https://code.jquery.com/jquery-3.5.1.min.js"
    ></script>
  </head>

  <body>
    <nav class="navbar navbar-dark bg-dark">
      <a href="/" class="navbar-brand">[A.P.I]... Tickets de fallas</a>
    </nav>
    <section>
      <table class="table table-bordered table-hover" id="tablajson">
        <thead>
          <tr>
            <th>nº</th>
            <th>Nombre</th>
            <th>Falla</th>
            <th>Email</th>
            <th>Celular</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>

      <script type="text/javascript">
        $(document).ready(function () {
          var url = "generajson.php";
          $("#tablajson tbody").html("");
          $.getJSON(url, function (customer) {
            $.each(customer, function (i, customer) {
              var newRow =
                "<tr>" +
                "<td>" +
                customer.id +
                "</td>" +
                "<td>" +
                customer.nombre +
                "</td>" +
                "<td>" +
                customer.adress +
                "</td>" +
                "<td>" +
                customer.email +
                "</td>" +
                "<td>" +
                customer.phone +
                "</td>" +
                "</tr>";
              $(newRow).appendTo("#customer");
            });
          });
        });
      </script>
    </section>

    <!-- Pie de pagina -->
    <p></p>
    <p></p>
    <p></p>
    <h4>Alumno</h4>
    <p></p>
    <h3 class="text-warning">Bogdar Iván Ramírez Hernández</h3>
    <p></p>
    <p class="text-info">UNIR MÉXICO.</p>
    <p></p>
    <p class="text-primary">Crud Node.Js Mysql ---> { Json }</p>
  </body>
</html>
