Create HTML table contains JSON array

Question

I want to create an HTML table containing two columns the first col is servicepoint and the second one is called watchid the both columns are in a JSON array called final and I want to insert the array data to an HTML table so I used this javascript function constructTable(selector,data)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>
    <script src='https://unpkg.com/tesseract.js@v2.1.0/dist/tesseract.min.js'></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src='excelexportjs.js'></script>
    <script src='mains.js'></script>
    
    <div class="container mt-5 ">
    <div id="dvjson"></div>
    <p id = "GFG_UP" style="font-size:15px;"></p>
    <button type="button" onclick="constructTable('#table')"class="btn btn-danger">Convert To Table</button>
    <table align="center" id="table" border="1"></table>
    </div>
</head>
<body>
    
</body>
</html>

mains.js

(async () => {
  const { data: { text } } = await readFile('sd.png');

  const data = await
    parseDataFromTextAndPropertyNames(text, ['servicepoint', 'watchid']);
 document.getElementById("dvjson").innerHTML = JSON.stringify(data, undefined, 4);
 const final = JSON.stringify(data);
 constructTable('#table',final);
   $("#table").excelexportjs({
  containerid: "table", 
  datatype: 'table', 
  dataset: data, 
  columns: getColumns(data)     
  });
  const result = await writeParsedTextDataAsJSON('myjsonfile.json', data);

  console.log({ result });
})();


// construct JSON array to HTML Table

 function constructTable(selector,data) {
             
            // Getting the all column names
            var cols = Headers(data, selector); 
  
            // Traversing the JSON data
            for (var i = 0; i < data.length; i++) {
                var row = $('<tr/>');  
                for (var colIndex = 0; colIndex < cols.length; colIndex++)
                {
                    var val = data[i][cols[colIndex]];
                     
                    // If there is any key, which is matching
                    // with the column name
                    if (val == null) val = ""; 
                        row.append($('<td/>').html(val));
                }
                 
                // Adding each row to the table
                $(selector).append(row);
            }
        }
         
        function Headers(data, selector) {
            var columns = [];
            var header = $('<tr/>');
             
            for (var i = 0; i < data.length; i++) {
                var row = data[i];
                 
                for (var k in row) {
                    if ($.inArray(k, columns) == -1) {
                        columns.push(k);
                         
                        // Creating the header
                        header.append($('<th/>').html(k));
                    }
                }
            }
             
            // Appending the header to the table
            $(selector).append(header);
                return columns;
        }

The above code is creating a table with only one column named 0 and the rows are the JSON final string

(async() => {
  const {
    data: {
      text
    }
  } = await readFile('sd.png');

  const data = await
  parseDataFromTextAndPropertyNames(text, ['servicepoint', 'fuckyou']);
  document.getElementById("dvjson").innerHTML = JSON.stringify(data, undefined, 4);
  const final = JSON.stringify(data);
  constructTable('#table', final);
  $("#table").excelexportjs({
    containerid: "table",
    datatype: 'table',
    dataset: data,
    columns: getColumns(data)
  });
  const result = await writeParsedTextDataAsJSON('myjsonfile.json', data);

  console.log({
    result
  });
})();


// construct JSON array to HTML Table

function constructTable(selector, data) {

  // Getting the all column names
  var cols = Headers(data, selector);

  // Traversing the JSON data
  for (var i = 0; i < data.length; i++) {
    var row = $('<tr/>');
    for (var colIndex = 0; colIndex < cols.length; colIndex++) {
      var val = data[i][cols[colIndex]];

      // If there is any key, which is matching
      // with the column name
      if (val == null) val = "";
      row.append($('<td/>').html(val));
    }

    // Adding each row to the table
    $(selector).append(row);
  }
}

function Headers(data, selector) {
  var columns = [];
  var header = $('<tr/>');

  for (var i = 0; i < data.length; i++) {
    var row = data[i];

    for (var k in row) {
      if ($.inArray(k, columns) == -1) {
        columns.push(k);

        // Creating the header
        header.append($('<th/>').html(k));
      }
    }
  }

  // Appending the header to the table
  $(selector).append(header);
  return columns;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>
<script src='https://unpkg.com/tesseract.js@v2.1.0/dist/tesseract.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src='excelexportjs.js'></script>
<script src='mains.js'></script>

<div class="container mt-5 ">
  <div id="dvjson"></div>
  <p id="GFG_UP" style="font-size:15px;"></p>
  <button type="button" onclick="constructTable('#table')" class="btn btn-danger">Convert To Table</button>
  <table align="center" id="table" border="1"></table>
</div>

@freedomn-m I get this error `Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse () at mains.js:45:21` — MrObscure, Jun 15 '22 at 16:05
Here's the issue: `const final = JSON.stringify(data); constructTable('#table',final);` change to `constructTable('#table', data);` — freedomn-m, Jun 15 '22 at 16:05
Could you provide the data as either a javascript object or a json string (whichever parseDataFromTextAndPropertyNames returns) (and maybe remove the expletive), so that's it's a runable snippet - then should be clear. See [mcve]. — freedomn-m, Jun 15 '22 at 16:09
@freedomn-m have you tried it? because it's not working its not giving any HTML table — MrObscure, Jun 15 '22 at 16:09
@Serge this is the data `{ "servicepoint": "120348929", "watchid": "343243249" }` — MrObscure, Jun 15 '22 at 16:10
@freedomn-m the Data is in [dvjson] as you see in the line number `44` `document.getElementById("dvjson").innerHTML = JSON.stringify(data, undefined, 4);` — MrObscure, Jun 15 '22 at 16:12
In summary: you're passing a stringified object (ie a JSON string) and iterating over that string - pass the original `data` not the stringify()'d version. Secondly, you need to iterate over properties, which the linked answer shows you how to do. — freedomn-m, Jun 15 '22 at 16:19
@freedomn-m i didn't understand the problem can you fix the code? — MrObscure, Jun 15 '22 at 16:22

Create HTML table contains JSON array

0 Answers0