Выборка данных ответа Json в таблицу html

Question

Поскольку я новый разработчик, у меня возникла проблема. Я получаю данные из базы данных с помощью вызова 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. Что не так с моим кодом? как вы получаете рейд этой причудливой проблемы?

Answer 1

Значения находятся внутри 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>");

Answer 2

Вам необходимо добавить dataType: 'JSON' в ваш запрос jQuery AjAX и изменить data.length на data.orderdetails.length.

Пример:

 $.ajax({
            type: 'GET',
            url: './getOrderdtl.php',
             data: {ordid: $text},
            dataType: 'JSON',
            success: function(data) {
                data = data.orderdetails;
                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);
    }

        });