Click here to Skip to main content
15,867,835 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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)

What I have tried:

index.php

<!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;
        }      


JSON data
Quote:
JSON.stringify(data, undefined, 4);
{ "servicepoint": "120348929", "watchid": "343243249" }


The above code is creating a table with only one column named 0 and the rows are the JSON final string screenshot
Posted
Updated 15-Jun-22 10:16am

1 solution

I think the problem is that you are using JSON.stringify to encode the data as a string into final. This means that when calling the constructTable function you are not actually processing an object, but the object as a string. Try to write the data and final variables to the console. You'll see what I mean. Solve this and you'll be fine :D!
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900