>source

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"
}

그는 내 아약스 요청이다

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>

  • 답변 # 1

    너무 복잡하게 만들지 마세요 :) 제목에 대해 하나의 "사전"을 사용하여 데이터를 나열하십시오.

    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>
    
    

    사전은 행의 순서와 정보를 설정합니다.

  • 답변 # 2

    이 기능이 필요하다고 생각합니다.

    원하는 경우 특정 키를 전달하거나 키를 모두 전달하지 않아도됩니다.

    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>
    
    

  • 답변 # 3

    다른 두 가지 접근 방식 :

    사용하다 $.each 그냥 keyvalue ,하지만 모든 키와 값을 통과합니다.

    // 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>
    
    

    데이터를 배열에 넣고 각 값의 이름을 지정합니다. 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>
    
    

  • 답변 # 4

    제발, 교체, value.refNo 와 값

  • 이전 python - 다른 사용자가 시스템에서 가져 와서 실행할 수 있도록 Docker 작성 애플리케이션을 푸시 할 수 있습니까?
  • 다음 Sportsreference Python은 게임이 예약 된 날짜에 대해 빈 사전을 반환합니다