如何获取HTML表中的子子值

时间:2013-05-08 03:12:59

标签: html ajax web-services

我有一个以下面的Json格式返回的Web服务

{
    "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
}

我希望在HTML表格中显示上述数据。所以我对其他服务网址&进行了ajax调用。它也会返回我的firebug工具中的数据。

我无法以html格式打印上述数据。下面是我的HTML代码

<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>

以下是我的AJAX代码

$.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
});

我收到错误类型错误document.getelementbyId为空

非常感谢任何帮助

由于 Karthie

1 个答案:

答案 0 :(得分:0)

您要获取的JSON是一个具有属性data的对象,它是一个数组。在回调中,您将对象称为数据数组。更改您的代码以引用data.data。例如,您的for循环应如下所示:

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>';
}

至于您对document.getElementById的问题,请参阅此问题:It says that TypeError: document.getElementById(...) is null