1

Hola amigos tengo una tabla que renderizo con js y una vez la tengo necesito hacer otro proceso y los datos de esa tabla convertirlos en un json, para eventualmente mandarlos por un form, encontré esta librería que pretende ayudarme https://www.github.developerdan.com/table-to-json/ y este ejemplito que es de donde me estoy guiando http://jsfiddle.net/Crw2C/173/ bueno ya descargué la librería y la incluí, con la terminal veo que estoy recibiendo jquery.tabletojson.min.js sin problemas, pero mi error persiste

TypeError: $(...).tableToJSON is not a function , aquí les dejo lo que estoy haciendo

Scripts que me pidieron Los scripts los agrego en mi footer

 <script src="~/js/jquery.tabletojson.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script src="~/js/calculadoradeprestamos.js"></script>

                <input type="button" name="name" value="Solicitar cotización" onclick="operar()" id="submit_btn" />



                <br />

                <div id="error" class="panel panel-danger">
                    <div class="panel-heading" id="errorMsn"></div>
                </div>
            </div>
            <div class="col-lg-6 ">
                <div class=" top2 invisible" id="Tpagos">


                    <table class="table table-hover" id="Tablepagos">
                        <thead>
                            <tr>
                                <th>Núm.Pago</th>
                                <th>Fecha</th>
                                <th>Cantidad</th>
                            </tr>
                        </thead>
                        <tbody id="Tbodypagos"></tbody>
                    </table>


                </div>


            </div>

 // esto es operar()
if (todobienytranquilamente) { console.log('yeah')}
//esto es lo que me interesa 
else {

  var prestamo = amount * (1 + (.20));
  var pagolapso = prestamo / numpagos;

  var datecreated = new Date();
  var dd = datecreated.getDay().toString();
  var mm = datecreated.getMonth().toString();
  var yyyy = datecreated.getFullYear().toString();
  var hrs = datecreated.getHours().toString();
  var min = datecreated.getUTCMinutes().toString();


  var dat = dd + "/" + mm + "/" + yyyy + " " + hrs + ":" + min;
  document.getElementById("headMsn").
  innerHTML = "<div align='center'><h2>Tabla de pagos</h2></div>";
  $('#Tpagos').removeClass('invisible');
  // días de pago

  var numpInt = parseInt(numpagos);
  let date = new Date();

  let day = date.getDate();
  let month = date.getMonth() + 1;
  let year = date.getFullYear();

  for (let i = 1; i <= numpInt; i++) {
    Date.prototype.addDays = function(days) {
      var date = new Date(this.valueOf());
      date.setDate(date.getDate() + days);
      return date;
    }
    let d = new Date(day, month, year);
    let adddays = lapsoreal * i;
    let dnew = d.addDays(adddays);

    // alert(i)
    document.getElementById("Tbodypagos").innerHTML += `
                            <tr>
                                <td> ${ i } </td>
                                <td> ${ dnew } </td>
                                <td> ${ pagolapso } </td>
                            </tr>
                        `;


    document.getElementById("errorMsn").
    innerHTML = "<br/><label>Especificaciones</label><br>" +
      "lapso: cada " + lapsoreal + " días - $" + pagolapso +
      " / " + " número de pagos : " + numpagos +
      " / total a pagar: " + prestamo + " fecha de solicitud : " +
      datecreated + "<br/>" +
      "" + "<br/>" +
      "<section id='call - to - action' class='wow fadeIn'>" +
      "<h5>¿Te gustaría recibir esta información?</h5>" +
      "<input type = 'maill' placeholder = '[email protected]' name = 'mail' class='form-control top5' required />" +
      "<input type = 'button' name = 'name' id='tabletojson' value = 'Enviar'  class='pull-right top5 cta-btn'/>" +
      "</section>";


    $("#submit_btn").prop('disabled', true);


  }
  
  //aquí está mi error, les dejo lo demás solo para que tengan contexto de donde está saliendo todo
  $('#tabletojson').click(function() {
    var table = $('#Tablepagos').tableToJSON();
    alert(JSON.stringify(table));
  });

  //$('#calculoform').addClass('d-none');//

}

8
  • Añade la parte donde estás añadiendo los scripts al html Commented el 1 ago. 2019 a las 17:05
  • Saludos debes agregar tu HTML de como incluyes las librerias que mencionas, dado que da la impresión que estas llamando primero a la libreria "tableToJSON" antes de estar definida ó cargada esta por lo cual ayudaria mucho si agregas en que orden estas cargando tus librerias y tu codigo JavaScript Commented el 1 ago. 2019 a las 17:50
  • @DiegoAvila listo todo cual lo tengo y donde lo estoy llamando Commented el 1 ago. 2019 a las 18:03
  • el archivo " calculadoradeprestamos.js " es donde estas colocando tu código JavaScript e invocando tableToJSON ? Commented el 1 ago. 2019 a las 18:07
  • La referencia al jquery.tabletojson.min.js esta mala , o no la agregaste bien , si quitas la referencia en el ejemplo de JSFiddle te darás cuenta que saca tu mismo error (jsfiddle.net/Crw2C/173), mira este ejemplo abre la consola en el navegador y da click al botón te muestra el mismo error, revisa tu librería Commented el 1 ago. 2019 a las 18:48

1 respuesta 1

1

Revisa este snippet lo que hice fue pegar el código de la pagina del tableToJSON y funciono

$('#run').click(function() {
  var table = $('#Tablepagos').tableToJSON();
  alert(JSON.stringify(table));
});
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
<script>
/* Este fue el código que pegue de la pagina*/
$( document ).ready(function() {
!function(a){"use strict";a.fn.tableToJSON=function(b){var c={ignoreColumns:[],onlyColumns:null,ignoreHiddenRows:!0,ignoreEmptyRows:!1,headings:null,allowHTML:!1,includeRowId:!1,textDataOverride:"data-override",textExtractor:null};b=a.extend(c,b);var d=function(a){return void 0!==a&&null!==a},e=function(c){return d(b.onlyColumns)?-1===a.inArray(c,b.onlyColumns):-1!==a.inArray(c,b.ignoreColumns)},f=function(b,c){var e={},f=0;return a.each(c,function(a,c){f<b.length&&d(c)&&(e[b[f]]=c,f++)}),e},g=function(c,d,e){var f=a(d),g=b.textExtractor,h=f.attr(b.textDataOverride);return null===g||e?a.trim(h||(b.allowHTML?f.html():d.textContent||f.text())||""):a.isFunction(g)?a.trim(h||g(c,f)):"object"==typeof g&&a.isFunction(g[c])?a.trim(h||g[c](c,f)):a.trim(h||(b.allowHTML?f.html():d.textContent||f.text())||"")},h=function(c,d){var e=[],f=b.includeRowId,h="boolean"==typeof f?f:"string"==typeof f?!0:!1,i="string"==typeof f==!0?f:"rowId";return h&&"undefined"==typeof a(c).attr("id")&&e.push(i),a(c).children("td,th").each(function(a,b){e.push(g(a,b,d))}),e},i=function(a){var c=a.find("tr:first").first();return d(b.headings)?b.headings:h(c,!0)},j=function(c,h){var i,j,k,l,m,n,o,p=[],q=0,r=[];return c.children("tbody,*").children("tr").each(function(c,e){if(c>0||d(b.headings)){var f=b.includeRowId,h="boolean"==typeof f?f:"string"==typeof f?!0:!1;n=a(e);var r=n.find("td").length===n.find("td:empty").length?!0:!1;!n.is(":visible")&&b.ignoreHiddenRows||r&&b.ignoreEmptyRows||n.data("ignore")&&"false"!==n.data("ignore")||(q=0,p[c]||(p[c]=[]),h&&(q+=1,"undefined"!=typeof n.attr("id")?p[c].push(n.attr("id")):p[c].push("")),n.children().each(function(){for(o=a(this);p[c][q];)q++;if(o.filter("[rowspan]").length)for(k=parseInt(o.attr("rowspan"),10)-1,m=g(q,o),i=1;k>=i;i++)p[c+i]||(p[c+i]=[]),p[c+i][q]=m;if(o.filter("[colspan]").length)for(k=parseInt(o.attr("colspan"),10)-1,m=g(q,o),i=1;k>=i;i++)if(o.filter("[rowspan]").length)for(l=parseInt(o.attr("rowspan"),10),j=0;l>j;j++)p[c+j][q+i]=m;else p[c][q+i]=m;m=p[c][q]||g(q,o),d(m)&&(p[c][q]=m),q++}))}}),a.each(p,function(c,g){if(d(g)){var i=d(b.onlyColumns)||b.ignoreColumns.length?a.grep(g,function(a,b){return!e(b)}):g,j=d(b.headings)?h:a.grep(h,function(a,b){return!e(b)});m=f(j,i),r[r.length]=m}}),r},k=i(this);return j(this,k)}}(jQuery);
});
</script>



<button id="run" class="btn btn-primary">Convert!</button>

<div class="col-lg-6 ">
  <div class=" top2 invisible" id="Tpagos">
    <table id='Tablepagos'>
      <thead>
           <tr>
             <th>Núm.Pago</th>
             <th>Fecha</th>
             <th>Cantidad</th></tr>
      </thead>
      <tbody>
        <tr>
          <td>Jill</td>
          <td>Smith</td>
          <td>50</td>
       </tr>
     </tbody>
   </table>
  </div>
</div>

2
  • 1
    funcionó bastante bien y veo que estas usando ecmascript pordrías explicar un poco qué pasó? Commented el 1 ago. 2019 a las 20:15
  • 1
    Solo supuse que si no estaba definido era por dos razones, por que al presentarse ese error aparece siempre que no este la librería definida , valide que no estuviera bien el nombre .tableToJSON(); pero lo estaba, lo otro era que no estuviera bien la referencia, entonces, solo entre al JSFiddel que pusiste y hice click en la referencia del tableJson copie el código y lo inicialice en Jquery , al probar funciono, lo que me quiso decir que la referencia estaba mal o copiaste mal el código en tu archivo. Commented el 1 ago. 2019 a las 20:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.