将来自 ajax 的 JSON 响应显示为 HTML 或表格

Question

显示 json 数据的代码

$('body').on('click','#check_history',function () {
var settings = {
                    "async": true,
                    "crossDomain": true,
                    "url": "https://url.com",
                    "method": "POST",
                    "headers": {
                        "content-type": "application/x-www-form-urlencoded",
                        "cache-control": "no-cache",
                        "postman-token": "bla-bla-bla-bla"
                    },
                    "data": {
                        "userid": "this-is-userid",
                        "to": "destination",
                        "count": "5"
                    }
                }
    $.ajax(settings).done(function (response) {
    console.log(response);
     //I think I need some code here
    });
});

我从控制台中的 AJAX 获得以下 JSON 响应

    {
    "status": 0,
    "trxid": "101010101",
    "billpayQueryState": false,
    "billpayState": false,
    "trxList": [{
        "date": "16/1/2017 11:51",
        "transid": 1010101010,
        "type": "merchant_buy",
        "amount": 3500,
        "agent": "abc"
    }, {
        "date": "16/1/2017 11:25",
        "transid": 2020202020,
        "type": "merchant_buy",
        "amount": 4500,
        "agent": "abc"
    }, {
        "date": "16/1/2017 11:5",
        "transid": 3030303030,
        "type": "merchant_buy",
        "amount": 4500,
        "agent": "abc"
    }, {
        "date": "16/1/2017 10:55",
        "transid": 4040404040,
        "type": "merchant_buy",
        "amount": 5000,
        "agent": "abc"
    }, {
        "date": "16/1/2017 10:39",
        "transid": 5050505050,
        "type": "merchant_buy",
        "amount": 5500,
        "agent": "abc"
    }],
    "agentData": {
        "walletType": 0,
        "isWaitingForKyc": false,
        "isAllowToKyc": false,
        "isOutlet": false
    }
}

我需要将上面的 JSON 数据显示为易于人类阅读的表格或 html。我已经从 google 和 stackoverflow 尝试了很多方法，但没有解决我的问题。我该怎么做？请帮忙！

Answer 1

简单映射响应并将数据附加到表中。

$(function() {
  var response =  {
    "status": 0,
    "trxid": "101010101",
    "billpayQueryState": false,
    "billpayState": false,
    "trxList": [{
        "date": "16/1/2017 11:51",
        "transid": 1010101010,
        "type": "merchant_buy",
        "amount": 3500,
        "agent": "abc"
    }, {
        "date": "16/1/2017 11:25",
        "transid": 2020202020,
        "type": "merchant_buy",
        "amount": 4500,
        "agent": "abc"
    }, {
        "date": "16/1/2017 11:5",
        "transid": 3030303030,
        "type": "merchant_buy",
        "amount": 4500,
        "agent": "abc"
    }, {
        "date": "16/1/2017 10:55",
        "transid": 4040404040,
        "type": "merchant_buy",
        "amount": 5000,
        "agent": "abc"
    }, {
        "date": "16/1/2017 10:39",
        "transid": 5050505050,
        "type": "merchant_buy",
        "amount": 5500,
        "agent": "abc"
    }],
    "agentData": {
        "walletType": 0,
        "isWaitingForKyc": false,
        "isAllowToKyc": false,
        "isOutlet": false
    }
}
  $.map(response.trxList, function(val, i) {
    var htm = '<tr><td>' + val.date + '</td><td>' + val.transid + '</td><td>' + val.type + '</td><td>' + val.amount + '</td><td>' + val.agent + '</td></tr>';
    $('#table').append(htm);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table"></table>