JSON data into html table
Question
I have this json response
{
"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
}
and I need to put the "info_message" data into HTML table like below. I don't know how to go through the data of a field?
<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>
...
4 answers
solution1
0 2015-04-26 09:16:04
You have build you dynamically for the response. Please find the code below.
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);
solution2
0 2015-04-26 09:17:49
info_message is a string. You will need to break up the string into usable parts.
One option is to Split the rows using '\\n' as a delimiter.
You will then need to split each rows columns using ' - ' as a delimeter (you can't use '-' or it will split the date parts).
solution3
0 ACCPTED 2015-04-26 09:25:20
Write the code you wish you had.
<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>
should do the job.
HTH Georg
solution4
0 2015-04-26 09:27:15
First of all, please correct your json.
// if you are getting the json as a string then you should better parse it to 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"]
Now, when you generate you table, you can interate the array of info_messages that you got above for each row. And in each row, you want to display each part of info message seprated by "-" as a column. So you'll further have to split each info_messages above at "-" like, inside the loop -
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.