How to display JSON data in HTML table

175 Views Asked by At

I have a WordPress table and I have to fetch the data from wp_posts where the ID is 30.

I thought, let check first in the table if the id 30 is available or not. And I found the id 30 and data are showing like below structure

ID     | post_title    | post_content
30     | testing       | [["Name","Industry","Number","Website"],["pqr","Other","10","pqr.com"],["lmn","Other","15","lmn.com"],["xyz","Other","20","xyz.com"]]

now I tried the below code to get the data

process.php

This is my action name emplist code

$query="SELECT * FROM `wp_posts` where ID=30";

try {
          $stmt = $pdo->prepare($query);
          $stmt->execute();
          $row = $stmt->fetch();

        $arr_result= array(
                    "id" =>$row['ID'],
                    "postcontent" => $row['post_content']
                     );
    
        }
        catch(PDOException $e) {
            echo "Error: " . $e->getMessage();
        }

        print_r($arr_result);

        //echo json_encode($arr_result);

Now I am getting the below output

Array ( 
       [id] => 30 
       [postcontent] => [
                          ["Name","Industry","Number","Website"],
                          ["pqr","Other","10","pqr.com"],
                          ["lmn","Other","15","lmn.com"],
                          ["xyz","Other","20","xyz.com"],
                        ] 

            ) 

I have the below script when the page loads then it will call the process.php

<script type="text/javascript">
        $(document).ready(function(){
            $.ajax({
                url: 'process.php',
                method:'post',
                dataType: "json", 
                data:{action:"emplist"},  
                success: function(data){
                var htmlText = '';
                for (var key in data['postcontent']) {

                htmlText += '<div>' + data[key].postcontent + '</div>'; 
                }
                $('body').append(htmlText);
                    
                }
            });

        });
    </script>

My issue is how can I show the above output in the html table?

My console.log(data) out put is

Object {
             id: 30, 
             postcontent: "[[\"Name\",\"Industry\",\"Number\",\"Website\"],
                           [\"pqr\",\"Other\",\"10\",\"pqr.com\"],
                           [\"lmn\",\"Other\",\"15\",\"lmn.com\"],
                           [\"xyz\",\"Other\",\"20\",\"xyz.com\"],

                           ]" }
0

There are 0 best solutions below