Create Json with data from a table

Question

Create Json with data from a table

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I have the following table that is filled when making a formula

What I must do is that when I click on a button to export, I create a json with the code and the quantity, and I put it to a function. This is what I have:

$(document).ready(function(){
  $('.exportar').click(function(){

    var imgData = canvas = document.getElementById($(this).attr('rel')).toDataURL("image/png");
    var pdf = new jsPDF;
    pdf.addImage(imgData, 'PNG', 10, 10);
    var download = $('.exportar');
     pdf.save("download.pdf");   

      jsonObj = [];
      $("table[class=rc]").each(function(){
        var id = $(this).attr('.muestra');
        var codigo = $(this).val();

        item = {}
        item [".muestra"] = id;
        item [".codpex"] = codigo;
        jsonObj.push(item);
      });
      console.log(jsonObj);

  var scope = window.parent.angular.element(window.frameElement).scope();
  scope.$ctrl.procesarLineas(jsonObj);
  scope.$apply();
  });
});

sample is the class of the code field and codepex is the quantity class.

This is the table

**<table class="rc">
<tr>
    <th >Código</th>
    <th >Cantidad</th>
</tr>
<tbody>
<tr>
<td  id='codpcentral' class='codpcentralx'></td> 
<td  id='npcentral' class='npcentralx'></td>
</tr>
</tbody>
</table>**

javascript jquery

asked by Eduard Zora 17.04.2017 в 20:55

source

2 answers

1

An example of how to access the content of each cell in the table according to the structure you posted can be viewed here done

Focusing only on the JavaScript part

- jQuery proves the following:

$(document).ready(function(){
  $('.exportar').click(function(){

    var imgData = canvas = document.getElementById($(this).attr('rel')).toDataURL("image/png");
    var pdf = new jsPDF;
    pdf.addImage(imgData, 'PNG', 10, 10);
    var download = $('.exportar');
     pdf.save("download.pdf");   

      jsonObj = [];
      $("table tbody tr").each(function(){
        var elitem ="{\"muestra\": " + $('.codpcentralx', this).html() + ", \"codpec\": " + $('.npcentralx', this).html() + "}";
        jsonObj.push(JSON.parse(elitem));
      });
      <!-- como tu petición es del JSON lo demás fuera del "each" a los "TR" del Table no son parte de la respuesta ni evalue -->
      console.log(jsonObj);

  var scope = window.parent.angular.element(window.frameElement).scope();
  scope.$ctrl.procesarLineas(jsonObj);
  scope.$apply();
  });
});

answered by 17.04.2017 в 22:24

C # - Hide or show panels within a SplitPanel How to configure Frame widget in Tkinter?

score 1 · Accepted Answer

The following code shows how to convert a table to a JSON object:

var json="";
$(document).ready(function () {
 $("#export").on("click",function () {
  $("table tbody tr").each(function () {
   json ="";
   $(this).find("td").each(function () {
    $this=$(this);
      json+=',"'+$this.attr("class")+'":"'+$this.html()+'"'
   });
   obj=JSON.parse('{'+json.substr(1)+'}');
   console.log(obj);
  });
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="rc">
 <thead>
  <tr>
   <th>Código</th>
   <th>Cantidad</th>
 </tr>
 </thead>
 <tbody>
  <tr>
   <td class='codigo'>1</td> 
   <td class='numero'>10</td>
  </tr>
  <tr>
   <td class='codigo'>2</td> 
   <td class='numero'>20</td>
  </tr>
  <tr>
   <td class='codigo'>3</td> 
   <td class='numero'>30</td>
  </tr>
 </tbody>
</table>
<button id="export">Exportar</button>