How to insert json data in to table?

Question

I have written php code to generate json data, Now We have to display this json data into table. My php code is able to generate data but not able able to insert into table, please help me on this.

My php code to generate json data booking.php

<?php
header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request
mysql_connect("localhost","root","2180");
mysql_select_db("service");

$query="Select * from customer where services='2'";
$result=mysql_query($query);

if ( $result === false ) {
  die("Can\'t do that: " . mysql_error());
}

$retVal = array();
//MYSQL_ASSOC remove key =field identifier
while( $row = mysql_fetch_array( $result, MYSQL_ASSOC ) ) {
  $retVal[] = $row;
}
echo json_encode( $retVal );

My javascript to print json data to table

<script>    
            function fetchData1(){              
                $(".data-contacts1-js tbody").empty();
                $.get("http://localhost/service/newJobs.php", function(data) {
                    $.each(data, function(i, contact) {
                        $(".data-contacts1-js").append(

                            "<td>" + contact.cust_name + "</td>" +
                            "<td>" + contact.cust_mobile + "</td>" +
                            "<td>" + contact.cust_email + "</td>" +
                            "<td>" + contact.cust_address + "</td>" +

                            );
                    });
                });
            }  

             $(document).ready(function(){
                  $(".data-contacts1-js tbody").empty();
                $('#fetchContacts1').click(function() {
                     fetchData1();
                });
            });

        </script>

Format of JSON which is generated by above php code

[
    {
        "cId": "65",
        "address1": "PWD Road, B Narayanapura, Bengaluru, Karnataka, India",
        "address2": "JSS Layout, Mysore, Karnataka, India",
        "city": "Bangalore",
        "comments": "ds",
        "email": "you@gmail.com",
        "landMark": "PWD Road, B Narayanapura, Bengaluru, Karnataka, India",
        "scheduledDate": "13-Feb-2015",
        "scheduledTime": "10:30 AM",
        "services": "2",
        "userContactNumber": "1220000000",
        "userName": "Gajendra"
    }
]

html code for table

<div class="row-fluid">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="muted pull-left">Carpenter Services</div>
                            </div>
                            <div class="block-content collapse in">
                                <div class="span12">
                                     <table class="data-contacts1-js table table-striped" >
                                          <thead>
                                            <tr>
                                                  <th>ID</th>
                                                  <th>Customer Name</th>
                                                  <th>Customer Mobile</th>
                                                  <th>Customer Email</th>
                                                  <th>Address</th>
                                                  <th>Date</th>
                                                  <th>Time</th>
                                                  <th>Status</th>
                                            </tr>
                                          </thead>
                                      <tbody>

                                      </tbody>
                                    </table>                                    
                                </div>
                                <button id="fetchContacts1" class="btn btn-default" type="submit">Refresh</button>                          
                            </div>
                        </div>
                        <!-- /block -->
                    </div>

What is your question? Is your code working, if not, what isn't working? Are you getting errors in the console? You need to provide more information. — Andy, Feb 12 '15 at 11:16
In .append() add tags around the table cells. Additionally, if you have tags in your document, add those into your .append() selector (or vice versa). — Rauli Rajande, Feb 12 '15 at 11:20
in this line you have an extra + at the end : `"" + contact.cust_address + "" +` — Lelio Faieta, Feb 12 '15 at 11:22
@Andy, sorry for that, please check again, and if possible please don't close this question. — Neelabh Singh, Feb 12 '15 at 11:58

score 0 · Answer 1 · answered Feb 12 '15 at 11:21

isn't php an option to print the table? If yes you can just echo table rows in the foreach loop and that's it:

while( $row = mysql_fetch_array( $result ) ) {
  $retVal[] = $row;
}

becomes something like

while( $row = mysql_fetch_array( $result ) ) {
  $table_row .= "
     <tr>
        <td>$row['cust_name']</td>
        <td>$row['cust_mobile']</td>
        <td>$row['cust_email']</td>
        <td>$row['cust_address']</td>
     </tr>";
}

Dusan Krstic · Answer 2 · 2015-02-12T14:15:12.730

This is a way to work this with JavaScript

     function fetchData1(){              
                    $(".data-contacts1-js tbody").empty();
                    $.get("http://localhost/service/newJobs.php", function(data) {
                    data=JSON.parse(data); //if the server returns text instead JSON object                       
                     for(var i in data){
                         var tr=$("<tr></tr>");
                         tr.append("<td>" + data[i].cust_name + "</td>" +
                                "<td>" + data[i].cust_mobile + "</td>" +
                                "<td>" + data[i].cust_email + "</td>" +
                                "<td>" + data[i].cust_address + "</td>");
                         $(".data-contacts1-js tbody").append(tr);
                       }
                    });
                }  

                 $(document).ready(function(){
                      $(".data-contacts1-js tbody").empty();
                    $('#fetchContacts1').click(function() {
                         fetchData1();
                    });
                });

On server script (php) add in first row

header('Content-type: application/json');

I have done accoring to you but in table it is giving undefined for every column.. — Neelabh Singh, Feb 12 '15 at 12:46
That is my respons on your JSON data - Gajendra 1220000000 you@gmail.com PWD Road, B Narayanapura, Bengaluru, Karnataka, India. No undefined :) — Dusan Krstic, Feb 12 '15 at 13:08
thanks I am getting the same data format but not able to print in to table, and undefined for every column please help me on this. — Neelabh Singh, Feb 12 '15 at 13:25

How to insert json data in to table?

2 Answers2

Linked