将 JSON 响应显示到 html 表中

Question

我想在 HTML 格式的表格中显示 JSON 响应。但它显示身份不明。

这是我的 JSON 响应

{
    "status": "200",
    "success": true,
    "mesg": "Data Found",
    "refNo": "10101010",
    "beneficiaryName": "mr x",
    "remitterName": "mr y",
    "branchName": "my branch",
    "accountNumber": "000123456789",
    "amount": 500.00,
    "pinCode": null,
    "exchangeCode": null,
    "exchangeHouse": "EXCHANGE COMPANY W.L.L",
    "remitStatus": "PAYMENT REJECTED"
}

他是我的ajax请求

success: function(data){
                    
    var remittancedata = ''; 

    //append data into the table
    $.each(data, function (key, value) { 
        remittancedata += '<tr>'; 
            remittancedata += '<td class="refNo">Ref No</td>'; 
            remittancedata += '<td class="refNodata">' + value.refNo + '</td>'; 
        remittancedata += '</tr>';
        //--------------------------
        remittancedata += '<tr>'; 
            remittancedata += '<td class="beneficiaryName">Beneficiary Name</td>'; 
            remittancedata += '<td class="beneficiaryNamedata">' + value.beneficiaryName + '</td>'; 
        remittancedata += '</tr>';
        //--------------------------------
        remittancedata += '<tr>'; 
            remittancedata += '<td class="remitterName">Remitter Name</td>'; 
            remittancedata += '<td class="remitterNamedata">' + value.remitterName + '</td>'; 
        remittancedata += '</tr>';
        //--------------------------------
        remittancedata += '<tr>'; 
            remittancedata += '<td class="branchName">Branch Name</td>'; 
            remittancedata += '<td class="branchNamedata">' + value.branchName + '</td>'; 
        remittancedata += '</tr>';
        //--------------------------------
        remittancedata += '<tr>'; 
            remittancedata += '<td class="accountNumber">Account Number</td>'; 
            remittancedata += '<td class="accountNumberdata">' + value.accountNumber + '</td>'; 
        remittancedata += '</tr>'; 
        //--------------------------------
        remittancedata += '<tr>'; 
            remittancedata += '<td class="amount">Amount</td>'; 
            remittancedata += '<td class="amountdata">' + value.amount + '</td>'; 
        remittancedata += '</tr>'; 
        //--------------------------------
        remittancedata += '<tr>'; 
            remittancedata += '<td class="exchangeHouse">Exchange House</td>'; 
            remittancedata += '<td class="exchangeHousedata">' + value.exchangeHouse + '</td>'; 
        remittancedata += '</tr>'; 
        //--------------------------------
        remittancedata += '<tr>'; 
            remittancedata += '<td class="remitStatus">Status</td>'; 
            remittancedata += '<td class="remitStatusdata">' + value.remitStatus + '</td>'; 
        remittancedata += '</tr>';  
        //CONSTRUCTION OF ROWS HAVING 
    }); 
          
    //INSERTING ROWS INTO TABLE  
    $('#RemittanceResult').append(remittancedata);
    
}

表格标记

<table class="table table-bordered" id="RemittanceResult">
    <thead>
      <tr>
        <th class="remInfo" width="50%">Info</th>
        <th class="remData" width="50%">Data</th>
      </tr>
    </thead>
</table>

Answer 1

我认为这个功能是你需要的：

如果你愿意，你可以传递特定的密钥，或者不传递密钥来拥有它。

var data = {
  "status": "200",
  "success": true,
  "mesg": "Data Found",
  "refNo": "10101010",
  "beneficiaryName": "mr x",
  "remitterName": "mr y",
  "branchName": "my branch",
  "accountNumber": "000123456789",
  "amount": 500.00,
  "pinCode": null,
  "exchangeCode": null,
  "exchangeHouse": "EXCHANGE COMPANY W.L.L",
  "remitStatus": "PAYMENT REJECTED"
}

function Append(_data, keys) {
  var remittancedata = '';
  var data = _data;

  if (keys && Array.isArray(keys) && keys.length) {
    const newData = {};
    keys.forEach(function(key) {
      newData[key] = _data[key];
    })
    data = newData;
  }

  Object.keys(data).forEach(item => {
    var _name = item.replace(/([a-z])([A-Z])/g, '$1 $2');
    _name = _name.charAt(0).toUpperCase() + _name.slice(1);
    remittancedata += '<tr>';
    remittancedata += '<td>' + _name + '</td>';
    remittancedata += '<td>' + data[item] + '</td>';
    remittancedata += '</tr>';
  })

  remittancedata = '<tbody>' + remittancedata + '</tbody>';
  $('#RemittanceResult').append(remittancedata);
}

Append(data, ['beneficiaryName', 'pinCode', 'exchangeHouse']);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-bordered" id="RemittanceResult">
  <thead>
    <tr>
      <th class="remInfo" width="50%">Info</th>
      <th class="remData" width="50%">Data</th>
    </tr>
  </thead>
</table>

Answer 2

另外两种方法：

1. 将$.each 与key 和value 一起使用，但它会遍历每个键和值。

// 1st approach.

var data = {
  "status": "200",
  "success": true,
  "mesg": "Data Found",
  "refNo": "10101010",
  "beneficiaryName": "mr x",
  "remitterName": "mr y",
  "branchName": "my branch",
  "accountNumber": "000123456789",
  "amount": 500.00,
  "pinCode": null,
  "exchangeCode": null,
  "exchangeHouse": "EXCHANGE COMPANY W.L.L",
  "remitStatus": "PAYMENT REJECTED"
};

var remittancedata = '';

$.each(data, function(key, value) {
  remittancedata += '<tr>';
  remittancedata += '<td class="refNo">' + key + '</td>';
  remittancedata += '<td class="refNodata">' + value + '</td>';
  remittancedata += '</tr>';
});

$('#RemittanceResult1').append(remittancedata);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered" id="RemittanceResult1">
  <thead>
    <tr>
      <th class="remInfo" width="50%">Info</th>
      <th class="remData" width="50%">Data</th>
    </tr>
  </thead>
</table>

1. 将数据放入数组并命名每个值：value.refNo。

// data in an array.
var data = [{
  "status": "200",
  "success": true,
  "mesg": "Data Found",
  "refNo": "10101010",
  "beneficiaryName": "mr x",
  "remitterName": "mr y",
  "branchName": "my branch",
  "accountNumber": "000123456789",
  "amount": 500.00,
  "pinCode": null,
  "exchangeCode": null,
  "exchangeHouse": "EXCHANGE COMPANY W.L.L",
  "remitStatus": "PAYMENT REJECTED"
}];

var remittancedata = '';

//append data into the table
$.each(data, function(key, value) {
  remittancedata += '<tr>';
  remittancedata += '<td class="refNo">Ref No</td>';
  remittancedata += '<td class="refNodata">' + value.refNo + '</td>';
  remittancedata += '</tr>';
  //--------------------------
  remittancedata += '<tr>';
  remittancedata += '<td class="beneficiaryName">Beneficiary Name</td>';
  remittancedata += '<td class="beneficiaryNamedata">' + value.beneficiaryName + '</td>';
  remittancedata += '</tr>';
  //--------------------------------
  remittancedata += '<tr>';
  remittancedata += '<td class="remitterName">Remitter Name</td>';
  remittancedata += '<td class="remitterNamedata">' + value.remitterName + '</td>';
  remittancedata += '</tr>';
  //--------------------------------
  remittancedata += '<tr>';
  remittancedata += '<td class="branchName">Branch Name</td>';
  remittancedata += '<td class="branchNamedata">' + value.branchName + '</td>';
  remittancedata += '</tr>';
  //--------------------------------
  remittancedata += '<tr>';
  remittancedata += '<td class="accountNumber">Account Number</td>';
  remittancedata += '<td class="accountNumberdata">' + value.accountNumber + '</td>';
  remittancedata += '</tr>';
  //--------------------------------
  remittancedata += '<tr>';
  remittancedata += '<td class="amount">Amount</td>';
  remittancedata += '<td class="amountdata">' + value.amount + '</td>';
  remittancedata += '</tr>';
  //--------------------------------
  remittancedata += '<tr>';
  remittancedata += '<td class="exchangeHouse">Exchange House</td>';
  remittancedata += '<td class="exchangeHousedata">' + value.exchangeHouse + '</td>';
  remittancedata += '</tr>';
  //--------------------------------
  remittancedata += '<tr>';
  remittancedata += '<td class="remitStatus">Status</td>';
  remittancedata += '<td class="remitStatusdata">' + value.remitStatus + '</td>';
  remittancedata += '</tr>';
  //CONSTRUCTION OF ROWS HAVING
});

//INSERTING ROWS INTO TABLE
$('#RemittanceResult2').append(remittancedata);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-bordered" id="RemittanceResult2">
  <thead>
    <tr>
      <th class="remInfo" width="50%">Info</th>
      <th class="remData" width="50%">Data</th>
    </tr>
  </thead>
</table>

Answer 3

不要把事情复杂化 :) 只需使用一个“字典”作为标题列出数据即可：

const json = {
  "status": "200",
  "success": true,
  "mesg": "Data Found",
  "refNo": "10101010",
  "beneficiaryName": "mr x",
  "remitterName": "mr y",
  "branchName": "my branch",
  "accountNumber": "000123456789",
  "amount": 500.00,
  "pinCode": null,
  "exchangeCode": null,
  "exchangeHouse": "EXCHANGE COMPANY W.L.L",
  "remitStatus": "PAYMENT REJECTED"
}

const dictionary = {
  "refNo": "Ref No",
  "beneficiaryName": "Beneficiary Name",
  "remitterName": "Remitter Name",
  "branchName": "Branch Name",
  "accountNumber": "Account Number",
  "amount": "Amount",
  "exchangeHouse": "Exchange House",
  "status": "Status",
}

const tableRow = (dictionary, json) => {
  let html = ''
  for (let key in dictionary) {
    html += '<tr>'
    html += `<td class="${ key }">${ dictionary[key] }</td>`
    html += `<td class="${ key }data">${ json[key] }</td>`
    html += '</tr>'
  }
  return html
}

(function() {
  const row = tableRow(dictionary, json)
  $('table tbody').append(row)
})();

html,
body {
  font-family: Arial;
}

.table.table-bordered {
  border: 1px solid black;
  border-collapse: collapse;
}

.table.table-bordered thead th,
.table.table-bordered tbody td {
  border: 1px solid black;
  padding: 8px 16px;
}

.table thead th {
  background: lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" id="RemittanceResult">
  <thead>
    <tr>
      <th class="remInfo" width="50%">Info</th>
      <th class="remData" width="50%">Data</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

字典设置行的顺序和信息。

Answer 4

请更换， value.refNo 和 价值