How to get the sub-child values in HTML tables

Question

I have a web-service that returns with the below Json format

{
    "data": [
        {
            "id": 61,
            "fullName": "second,first",
            "firstName": "second",
            "ownerId": 4,
            "emailId": "skmvilla@gmail.com",
            "lastName": "first",
            "isDeleted": "N",
            "smodifyDate": "July2012",
            "statusName": "New",
            "orgId": 20
        },
        {
            "id": 62,
            "fullName": "second,first",
            "firstName": "second",
            "ownerId": 4,
            "emailId": "skmvilla@gmail.com",
            "lastName": "first",
            "isDeleted": "N",
            "smodifyDate": "July2012",
            "statusName": "New",
            "orgId": 20
        }
 ],
    "vprospectMonthlySum": null,
    "vProspectMonthly": null,
    "vProspectCount": null
}

I want the show the above data in a HTML table. So i made a ajax call to the rest service URL & also it returns with the data in my firebug tool.

i was not able to print the above data in a html form. below is my html code

<html>
       <head>
       <title>Itaxibook</title>

       <h2>Itaxi</h2>   </br>  


           <div class="table" id="tab1"> 

           <table class="basic-table" id="karthi">

           <thead>

           <tr>     
           <td><label >Id</label></td>
           <td align="left"><input type="text" id="id" class="medium" name="" value=""></td>
           </tr>

           <tr>
           <td><label>OrgId</label></td>
           <td align="left"><input type="text" id="orgId" class="medium" name="" value=""></td>
           </tr>               

           <tr>  
           <td><label>FullName</label></td>
           <td align="left"><input type="text" id="fullName" class="medium" name="" value=""></td>
           </tr>

           <tr>
           <td><label >EmailId</label></td>
           <td align="left"><input type="text" id="emailId" class="medium" name="" value=""></td>
           </tr>

           <tr>
           <td><label>ModifyDate</label></td>
           <td align="left"><input type="text" id="smodifyDate" class="medium" name="" value=""></td>
           </tr>



           </thead>

           </table>
 </div>                              





                          </form>

                  </head>                
                </html>
                </html>

Below is my AJAX code

$.ajax({
        type: "GET", //GET or POST or PUT or DELETE verb
        url: "http://88.80.223.163:8080/lumiin-service/lumiin/control/vprospects", // Location of the service
        //contentType: "application/json",
        //data: JSON.stringify(params),
        dataType: "json",
        success: function (data) {//On Successfull service call
            var txtStr = '<table class="datatable"><title="Prospect"><thead><tr> <th>Id</th> <th>OrgId</th> <th>FullName</th> <th>EmailId</th> <th>ModifyDate</th> </tr></thead><tbody></title>';

            for(var i = 0; i < data.length; i++) {
                txtStr += '<tr class="gradeA"> <td><a class="edit_row" href="#tab2" onclick="showDetails(\''+data[i].id+'\');">'+data[i].id+'</a></td> <td>'+data[i].orgId+'</td> <td>'+data[i].fullName+'</td> <td>'+data[i].emailId+'</td> <td>'+data[i].smodifyDate+'</td> </tr>';
            }
            txtStr += '</tbody></table>';
            $("#tab1").html(txtStr);

            document.getElementById('karthi').innerHTML = txtStr;

        },
        error: ServiceFailed// When Service call fails
});

i am getting the error as Type error document.getelementbyId is null

Any help will be much appreciated

Thanks Karthie

Answer 1

The JSON you are getting back is an object with a property data that is an array. In your callback, you are referring to the object as if it is the data array. Change your code to refer to data.data . For example, your for loop should look like this:

var dataArr = data.data;
for(var i = 0; i < dataArr.length; i++) {
    var datum = dataArr[i];
    txtStr += '<tr class="gradeA"> <td>'+
        '<a class="edit_row" href="#tab2"' +
        'onclick="showDetails(\''+datum.id+
        '\');">'+datum.id+'</a></td> <td>'+
        datum.orgId+'</td> <td>'+datum.fullName+
        '</td> <td>'+datum.emailId+'</td> <td>'+
        datum.smodifyDate+'</td> </tr>';
}

As far as your issue with document.getElementById, see this question: It says that TypeError: document.getElementById(...) is null

How to get the sub-child values in HTML tables

Question

1 answers

solution1
0 2013-05-08 14:58:58

How to get the sub-child values in HTML tables

Question

1 answers

solution1 0 2013-05-08 14:58:58

solution1
0 2013-05-08 14:58:58