Issue
Actually I want to render the data in a table. So I want to loop the value of JSON from the result so that It will add all tr in the table.
so I applied in one value the loop for testing not to the rest of all just for testing. But it is not working. So if you guys can help in the loop issue. Although it is working in index case by giving index number
{
"response": {
"status": true,
"is_batch": false,
"valid": false,
"result": {
"qy": [
{
"ti": "1",
"ok_e": "1",
"type": "14",
"code": "KG",
"ok_conversion_table_ti": "13",
"base_uom": "Gram",
"base_qty": "1000",
"status": "1",
"created_by": "0",
"creation_datetime": "2022-01-08 12:17:46",
"trans": [
{
"ti": "5",
"ok_e": "1",
"ok_uom_ti": "1",
"lang_code": "1",
"name": "Kilogram",
"status": "1",
"created_by": "0",
"creation_datetime": "2022-04-19 01:21:24"
}
]
},
{
"ti": "5",
"ok_e": "1",
"type": "1",
"code": "FT",
"ok_conversion_table_ti": "1",
"base_uom": "Inch",
"base_qty": "12",
"status": "1",
"created_by": "0",
"creation_datetime": "2022-09-24 17:40:26",
"trans": [
{
"ti": "6",
"ok_e": "1",
"ok_uom_ti": "5",
"lang_code": "1",
"name": "Foot",
"status": "1",
"created_by": "0",
"creation_datetime": "2022-09-24 17:40:26"
}
]
}
]
},
"context": {
"self": 1,
"first": 1,
"prev": "",
"next": "",
"last": 1,
"size": 5,
"total": 1
}
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table class="table table-bordered table-striped" id="market_data">
<tr>
<th>ti</th>
<th>ok_e</th>
<th>type</th>
<th>code</th>
<th>ok_conversion_table_ti</th>
<th>base_uom</th>
<th>base_qty</th>
<th>status</th>
<th>created_by</th>
<th>creation_datetime</th>
</tr>
</table>
</body>
</html>
<script>
$(document).ready(function(){
$.getJSON("data.json",function(data){
var market_value = ' ';
for( var i = 0 ; i < result.qy.length; i++ ){
$.each(data,function(key,value){
market_value+='<tr>';
market_value+= '<td>'+value.result.qy[i].ti+'</td>';
market_value+='<td>'+value.ok_e+'</td>';
market_value+='<td>'+value.type+'</td>';
market_value+='<td>'+value.code+'</td>';
market_value+='<td>'+value.ok_conversion_table_ti+'</td>';
market_value+='<td>'+value.base_uom+'</td>';
market_value+='<td>'+value.base_qty+'</td>';
market_value+='<td>'+value.status+'</td>';
market_value+='<td>'+value.created_by+'</td>';
market_value+='<td>'+value.creation_datetime+'</td>'
market_value+='</tr>'
});
$('#market_data').append(market_value);}}
);
});
</script>Solution
You need to parse deeper and add to the tbody
$.getJSON("data.json",process)
Here is a map example using valid HTML
const process = data => {
const html = data.response.result.qy.map(value => `<tr>
<td>${value.ti}</td>
<td>${value.ok_e}</td>
<td>${value.type}</td>
<td>${value.ok_conversion_table_ti}</td>
<td>${value.base_uom}</td>
<td>${value.base_qty}</td>
<td>${value.status}</td>
<td>${value.base_qty}</td>
<td>${value.created_by}</td>
<td>${value.creation_datetime}</td></tr>`).join("")
$("#tb").html(html)
};
const process = data => {
const html = data.response.result.qy.map(value => `<tr>
<td>${value.ti}</td>
<td>${value.ok_e}</td>
<td>${value.type}</td>
<td>${value.ok_conversion_table_ti}</td>
<td>${value.base_uom}</td>
<td>${value.base_qty}</td>
<td>${value.status}</td>
<td>${value.base_qty}</td>
<td>${value.trans[0].name}</td>
<td>${value.created_by}</td>
<td>${value.creation_datetime}</td></tr>`).join("")
$("#tb").html(html)
};
// test data
const data = { "response": { "status": true, "is_batch": false, "valid": false, "result": { "qy": [{ "ti": "1", "ok_e": "1", "type": "14", "code": "KG", "ok_conversion_table_ti": "13", "base_uom": "Gram", "base_qty": "1000", "status": "1", "created_by": "0", "creation_datetime": "2022-01-08 12:17:46", "trans": [{ "ti": "5", "ok_e": "1", "ok_uom_ti": "1", "lang_code": "1", "name": "Kilogram", "status": "1", "created_by": "0", "creation_datetime": "2022-04-19 01:21:24" }] }, { "ti": "5", "ok_e": "1", "type": "1", "code": "FT", "ok_conversion_table_ti": "1", "base_uom": "Inch", "base_qty": "12", "status": "1", "created_by": "0", "creation_datetime": "2022-09-24 17:40:26", "trans": [{ "ti": "6", "ok_e": "1", "ok_uom_ti": "5", "lang_code": "1", "name": "Foot", "status": "1", "created_by": "0", "creation_datetime": "2022-09-24 17:40:26" }] } ] }, "context": { "self": 1, "first": 1, "prev": "", "next": "", "last": 1, "size": 5, "total": 1 } } };
// you call this in the success
process(data)<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<table class="table table-bordered table-striped" id="market_data">
<thead>
<tr>
<th>ti</th>
<th>ok_e</th>
<th>type</th>
<th>code</th>
<th>ok_conversion_table_ti</th>
<th>base_uom</th>
<th>base_qty</th>
<th>other units</th>
<th>status</th>
<th>created_by</th>
<th>creation_datetime</th>
</tr>
</thead>
<tbody id="tb"></tbody>
</table>Answered By - mplungjan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.