使用 JQuery 在 AJAX 成功上迭代 JSON 数据

Question

我有一个从查询返回 JSON 数据的 AJAX 调用：

<script>
    function retrieveTrips(){
        // Get a history of trips

        $.ajax({
            url:'cfcs/mileagedata.cfc?method=getTrips&returnformat=json',
            data: { ticket_id: #get_ticket.ticket_id# },
            success: function(response) {
                $("##tripDate").html(response);
                console.log(response);
                }
          });
    }
</script>

我想在成功函数上迭代返回的 JSON 数据，并使用 JQUERY 将其输出到 HTML 表。我能做到的最接近的就是将所有数据输出到表中的 div 中。谁能帮我看看 JQUERY 代码的外观？

这是我的 JSON 响应：

{
    "COLUMNS": ["ID", "VEHICLE_ID", "TICKET_ID", "_DATE", "START_ODOMETER", "END_ODOMETER", "ORIGIN", "DESTINATION", "TOTAL_MILEAGE", "EXPENSES", "DESCRIPTION"],
    "DATA": [
        [1650, "6", "30996", "September, 29 2016 00:00:00 -0400", "11782", "11822", "Jaydien", "Mazza", "40", "0.00", ""]
    ]
}

我的编辑：

 <script>
        function retrieveTrips(){
            // Get a history of trips

            $.ajax({
                url:'cfcs/mileagedata.cfc?method=getTrips&returnformat=json',
                data: { ticket_id: #get_ticket.ticket_id# },
                success: function(response) {
                    $("##tripDate").html(response);

                    for (i = 0; i < response.DATA.length; i++) { 
                        var row = response.DATA[i];
                        console.log(row);
                    }

                    }
              });
        }
    </script>

Answer 1

在你的成功调用中试试这个，用这个代替你的 console.log();

response = JSON.parse(response);

for (i = 0; i < response.DATA.length; i++) { 
    var row = response.DATA[i];
    console.log(row);
}

你还有一个 ## 应该只是 1 # 否则它不会返回到 propper 元素

返回 json 是一个 JSON 返回的两个属性，两个属性都包含一个数组，第一个属性告诉你列的含义第二个包含实际数据，只处理你调用 response.DATA 的数据，DATA 是属性名称在json对象中