Json响应数据获取到html表

时间:2018-11-07 05:06:43

标签: jquery json ajax

由于我是新开发人员,所以遇到了问题。 我正在使用Ajax调用从数据库中获取数据。我的回应如下

{
    "orderdetails":
    {
    "PROD_CODE":["017.601.104"],
    "PROD_NAME":["Super Cat Door With Chitkini (2.5 x 2.5)' - left"],
    "GROSS_RATE":["914"],
    "SALE_RATE":["800"],
    "PERSENT":["12.473"],
    "SALE_QNTY":["1"],
    "TOTAL_PRICE":["800"]
    }
}

我想显示对

之类的表的JSON响应
<table class=" table table-hover table-condensed dtltable ">
    <tr>
    <th>Item code</th>
    <th>Item Name</th>
    <th>Gross Rate</th>
    <th>Sale Rate</th>
    <th>Percent</th>
    <th>Sasle qntity</th>
    <th>Total price</th>
    </tr>
    </table>

为此,我正在尝试以下代码

  $.ajax({
                type: 'GET',
                url: './getOrderdtl.php',
                 data: {ordid: $text},
                success: function(data) {

                    alert(data.length);
                    for (var i = 0; i < data.length; i++) {

                         var tr = $('<tr/>');
                    //   alert(data[PROD_CODE[i]]);

                        // Indexing into data.report for each td element
                        $(tr).append("<td>" + data[i].PROD_CODE+ "</td>");
                        $(tr).append("<td>" + data[i].PROD_NAME + "</td>");
                        $(tr).append("<td> " + data[i].GROSS_RATE + " </td>");
                        $(tr).append("<td> <input type='text' value=''>" + data[i].SALE_RATE + "</input> </td>");
                        $(tr).append("<td>" + data[i].PERSENT + "</td>");
                        $(tr).append("<td> <input type='text'>" + data[i].SALE_QNTY + "</input> </td>");
                        $(tr).append("<td>" + data[i].TOTAL_PRICE + "</td>");
                        $('.dtltable').append(tr);

                     }
                },


        error: function(xhr) {
        //Do Something to handle error
            alert(xhr);
        }

            });

但是返回值是UNDEFINED,这意味着在目标表的每一行中填充了“ undefind”文本。我的代码有什么问题?您如何突袭这个怪异的问题?

2 个答案:

答案 0 :(得分:0)

您需要在jQuery AjAX请求中添加dataType:'JSON'并将data.length更改为data.orderdetails.length。

示例:

.GroupBy(_ => _, StringComparer.CurrentCultureIgnoreCase)
.Where(_ => _.Count() == 1)

答案 1 :(得分:0)

值位于orderdetails对象内部,因此您的附加行应为:

    $(tr).append("<td>" + data[i].orderdetails.PROD_CODE+ "</td>");
    $(tr).append("<td>" + data[i].orderdetails.PROD_NAME + "</td>");
    $(tr).append("<td> " + data[i].orderdetails.GROSS_RATE + " </td>");
    $(tr).append("<td> <input type='text' value=''>" + data[i].orderdetails.SALE_RATE + "</input> </td>");
    $(tr).append("<td>" + data[i].orderdetails.PERSENT + "</td>");
    $(tr).append("<td> <input type='text'>" + data[i].orderdetails.SALE_QNTY + "</input> </td>");
    $(tr).append("<td>" + data[i].orderdetails.TOTAL_PRICE + "</td>");