Question

我有json回复

 {
  "result_ok":      "true",
  "info_message":   "2015-04-24 - Recharge - 2.8 \n 2015-04-23 - Transfer -   15.0 \n 2015-04-21 - Recharge - 3.5 \n 2015-04-15 - Recharge - 27.7 \n 2015-04-14 - Recharge - 5.0 \n",
  "client_currency":"EUR",
  "balance_account":109.5
}

我需要将"info_message"数据放入HTML表中，如下所示。我不知道如何查看某个字段的数据？

 <p class="text-right big"><span class="accountCredit">+ 109.5 EUR</span></p>
 <table class="table cBlue5">
    <tbody>
        <tr>
            <td>2015-04-24</td>
            <td>Recharge</td>
            <td>2.8</td>
        </tr>
        <tr>
            <td>2015-04-23</td>
            <td>Transfer</td>
            <td>15.0</td>
        </tr> 
...

Answer 1

您已动态为响应构建您。请找到以下代码。

 var tableData = response.info_message;
 var rows = tableData.split('\n'), columns, tableBodyString = "<table><tbody>" ;

 for(int rowIndex = 0, count = rows.length; rowIndex < count; rowIndex++)
   {
      tableBodyString += "<tr>";
      columns = rows[i].split(' - ');
      for(int colIndex = 0, colCount = columns.length; colIndex < colCount; colIndex++)
        {
            tableBodyString += '<td>' + column[colIndex].trim() + '</td>'; 
        }
        tableBodyString += "</tr>";;
    }

    tableBodyString += "</tbody></table>";
    // Inserting the dynamically generated table into a wrapper div
    $("table_wrapper").html(tableBodyString);

Answer 2

info_message是一个字符串。您需要将字符串拆分为可用部分。

一个选项是 Split 使用＆＃39; \ n＆＃39;作为分隔符。

然后，您需要使用＆＃39;分割每行的列。 - ＆＃39;作为分隔符（您不能使用＆＃39; - ＆＃39;或者它会分割日期部分）。

Answer 3

编写您希望拥有的代码。

<script>
  function create_html(json_obj) {
    return get_header(json_obj) +
             get_table(json_obj);

}

function get_header (json_obj) {
    return  '<p class="text-right big"><span class="accountCredit">+ '  +
          json_obj.balance_account.toString() + ' ' +
          json_obj.client_currency + ' ' +
          '</span></p>'
}


function get_table (json_obj) {
    return  ' <table class="table cBlue5"> <tbody> ' +
        get_rows(json_obj.info_message) +
        '</tbody></table>'
}

function get_rows (info_message) {
    return info_message.split(/\s*\n\s*/).map(get_single_row).join('\n');
}

function get_single_row (message) {
    var elements = message.split(/\s+\-\s+/)
    if(elements.length !== 3)
        return;
    return '<tr><td>' + elements[0] +'</td><td>' + 
                        elements[1] +'</td><td>' + 
                        elements[2] +'</td></tr>'
}
</script>

<body >
    <script>
  document.write(create_html( {"result_ok":"true", "info_message":"2015-04-24 - Recharge - 2.8 \n             2015-04-23 - Transfer - 15.0 \n              2015-04-21 - Recharge - 3.5 \n              2015-04-15 - Recharge - 27.7 \n              2015-04-14 - Recharge - 5.0 \n","client_currency":"EUR","balance_account":109.5}))
  </script>

  </body>

应该做的。

HTH Georg

Answer 4

首先，请更正你的json。

//如果您将json作为字符串获取，那么您最好将其解析为object

// jsonData = JSON.parse（jsonString）;

var jsonData = {
      result_ok: "true",
      info_message: "2015-04-24 - Recharge - 2.8 \n2015-04-23 - Transfer - 15.0\n2015-04-21 - Recharge - 3.5 \n2015-04-15 - Recharge - 27.7\n2015-04-14 - Recharge - 5.0",
      client_currency: "EUR",
      balance_account: 109.5
    };

    var info_messages = jsonData.info_message.split('\n'); 
       // this will give you an array of the info messages
      // like ["2015-04-24 - Recharge - 2.8 ", "2015-04-23 - Transfer - 15.0", "2015-04-21 - Recharge - 3.5 ", "2015-04-15 - Recharge - 27.7", "2015-04-14 - Recharge - 5.0"]

现在，当您生成表格时，您可以对每行上面的info_messages数组进行交互。并且在每一行中，您希望将“ - ”分隔的信息消息的每个部分显示为列。所以你还需要将上面的每个info_messages拆分为“ - ”，就像在循环中一样 -

info_message.split(" - ") // see that you split by " - " and not "-"
// the above split will then give you an array of strings ["2015-0424","Recharge","2.8"] for the first info message

将JSON数据转换为html表

4 个答案: