Create HTML table contains JSON

Question

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 15-Jun-22 6:55am

MohammedZr

Updated 15-Jun-22 10:16am

Add a Solution

1 solution

Add a Solution

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

ludosoep · Accepted Answer · 2022-06-15T10:16:00

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!

Create HTML table contains JSON

1 solution

Solution 1

Add your solution here

Preview 0

Create HTML table contains JSON

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us