使用ajax和dataType：“json”从数据库中获取数据以html形式显示

Question

I have been trying this over night but I cant seem to make it work. I tired various methods to let the data values retrieved from the database to be displayed onto the form but none seem to work. When users click on the table row they should be able to see the data values they inserted for that particular row. This is basically a database where users can store vendor details and edit them when needed. Right now I am working on editing part.

This is my html form code Where the data is supposed to be displayed.

 <div id="VendorTable" class="VendorTable">
 <div id="vendorformedit" class="vendorformedit" >
 <i class="fa fa-expand"></i>
 <form id="form" name="form" method="POST" action="updatevendorlist.php" >
    <div id="formparttwo" >
    <h3>Other Information</h3><hr>

    <label>Category:</label>
    <input type="text" name="category" id="category" /><br/>
    <label>Notes:</label>
    <input type="text" name="remarks" id="remarks" /><br/><br/>

    <h3>2nd Contact Person</h3><hr>
    <label>Contact Person 2:</label>
    <input type="text" name="contactPerson2" id="contactPerson2"><br/>
    <label>Contact Number 2:</label>
    <input type="text" name="contact2" id="contact2"/><br/>

    <button type="submit" form="form" value="Submit"><i class="fa fa-plus-square fa-3x" aria-hidden="true"></i></button>
    </div> 

    <div id="formpartone">
    <h3>Vendor Details</h3><hr>

    <label>Vendor Name:</label>
    <input type="text" name="vendorName" id="vendorName"/><br/>
    <label>Vendor Address:</label>
    <input type="text" name="vendorAddress" id="vendorAddress"/><br/>
    <label>Vendor E-mail:</label>
    <input type="email" name="vendorEmail" id="vendorEmail"/><br/><br/>

    <h3>1st Contact Person</h3><hr>
    <label>Contact Person 1:</label>
    <input type="text" name="contactPerson1" id="contactPerson1" ><br/>
    <label>Contact Number 1:</label>
    <input type="text" name="contact1" id="contact1" /><br/>
    </div>
    </form>
</div><!--End vendorformedit Form-->
</div><!--End VendorTable Table-->

I need the data retrieved from the database to be displayed in the input textarea. The ultimate aim is for users to edit the data.

This is the javascript code using Ajax and dataType:Jason

     $(document).on("click", ".individualrow", function(){ 
       var id=$(this).attr("vendor_id");  
       if(confirm("Are you sure you want to retrieve this?"))  
       {  confirm(id);
            $.ajax({ 
                method:"POST",   
                url:"retrievevendorlist.php",  
                data:{id:id},  
                dataType:"json",  
                success:function(data){ 
                 $('#category').val(data.category);  
                 $('#remarks').val(data.remarks);  
                 $('#contactPerson2').val(data.contactPerson2);  
                 $('#contact2').val(data.contact2);  
                 $('#vendorName').val(data.vendorName);  
                 $('#vendorAddress').val(data.vendorAddress);  
                 $('#vendorEmail').val(data.vendorEmail);  
                 $('#contactPerson1').val(data.contactPerson1);
                 $('#contact1').val(data.contact1); 

                 }  
            });  
            $(".individualrow").addClass("form_one");
            $(".vendorformedit").addClass("hide_form");
       }   
  });  

I am trying to retrieve the data from the database using the row id. I believe the code is working successfully in retrieving the data from the retrievevendorlist.php. However it is not displaying in the html form.

    <?php
    include("../LoginRegistrationSystem/connect.php");
    include("../LoginRegistrationSystem/functions.php");
    // attempt insert query execution
    if(isset($_POST['id'])){
    $sql = "SELECT * FROM vendor WHERE vendor_id = '".$_POST['id']."'";
    $result = mysqli_query($con, $sql);
    $row = mysqli_fetch_array($result);  
    echo json_encode($row);
    ?>

I am not sure where is the mistake. Kindly help me review and tell me where I am going wrong. Thank you in advance

Answer 1

I notice you're retrieving the data from the database as an array and it might be getting encoded to a json array. Try accessing the data on the client side as follows

data[0].category

Answer 2

I managed to solve it. Thanks to those who helped.

I had to spell out all the data needed from database and also I used accoc instead of array.