Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Cara menampilkan File json untuk ditampilkan ke tabel .html
Saya ingin bertanya, Ini file json (API) saya, saya ingin menampilkan nya ke tabel html saya. Saya ingin menampilkan data tersebut ke tabel html saya, di bagian kolom "feeds" saya gagal terus. Tanpa perlu menghapus kolom "channel", bagaimana source code nya? Mohon bantuannya
Saya ingin hasil tabelnya seperti gambar dibawah ini, tapi saya bingung source codenya seperti apa?
mohon bantuannya, berikut file json nya seperti ini
{
"channel": {
"id": 804745,
"name": "Water Quality",
"latitude": "-6.999032",
"longitude": "107.626451",
"field1": "PH Air",
"field2": "Tempearture",
"field3": "Kelembaban",
"created_at": "2019-06-19T16:24:48+07:00",
"updated_at": "2019-07-06T06:55:33+07:00",
"last_entry_id": 587
},
"feeds": [
{
"created_at": "2019-07-01T05:45:31+07:00",
"entry_id": 488,
"field1": "5.00\r\n\r\n"
},
{
"created_at": "2019-07-01T05:46:01+07:00",
"entry_id": 489,
"field1": "5.07\r\n\r\n"
}
]
}
Ini file json nya
<?php
$url = 'https://thingspeak.com/channels/804745/field/json?url=https://thingspeak.com/channels/804745/field/1.csv';
$data = file_get_contents($url); // put the contents of the file into a variable
$opendata = json_decode($data);
foreach ($opendata as $key => $value) {
}
?>
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
table tr td {
padding: 1rem;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td align="center">id</td>
<td align="center">name</td>
<td align="center">created_at</td>
<td align="center">field1</td>
<td align="center">field2</td>
<td align="center">field3</td>
<td align="center">latitude</td>
<td align="center">longitude</td>
<td align="center">updated_at</td>
<td align="center">last_entry_id</td>
<td align="center">NHITS</td>
</tr>
<?php
foreach ($opendata as $key => $value) {
echo '<tr>
<td>'.$value->id.'</td>
<td>'.$value->name.'</td>
<td>'.$value->created_at.'</td>
<td>'.$value->field1.'</td>
<td>'.$value->field2.'</td>
<td>'.$value->field3.'</td>
<td>'.$value->latitude.'</td>
<td>'.$value->longitude.'</td>
<td>'.$value->updated_at.'</td>
<td>'.$value->last_entry_id.'</td>
<td></td>
</tr>';
}
?>
</table>
</body>
</html>
Itu kodingan saya, cuman saya ingin menampilkan data pada kolom 'feeds' gimana ya?. Soalnya bingung saya mau get data nya gagal mulu
Tanggapan
beda post sama ini kah? https://sekolahkoding.com/forum/ubah-data-json-untuk-ditampilkan-ke-tabel-1562632282
beda kak, lebih spesifik aja kalau yg ini. Kira" bisa bantu source codenya ngga ya? biar mirip sama tabel gambar diatas
2 Jawaban:
tergantung mau parsing pake apa? javascript bisa, backend (php) juga bisa. Kalo ngerti objek & array sih bisa jadi mudah. coba cari cari seputar parsing json
kodingan nya kira2 seperti ini di sesuai kan aja, semoga membantu <pre> <div class="col-md-12 col-sm-12 col-xs-12"> <table id="ini_table" class="table table-striped table-bordered hidden" style="width:100%;"> <thead> <tr> <th></th> <th>created_at</th> <th>entry_id</th> <th>field1</th> </tr> </thead> <tbody id="test"> </tbody> </table> <div class="clearfix"></div> </div>
<script src="<?php echo site_url()?>assets/vendors/jquery/dist/jquery.min.js"></script> <script src="cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></script> <script> $(document).ready(function () { $('#ini_table').DataTable(); test(); }); var SITE_LOCAL = "<?php echo site_url()?>";
function test() {
var table = ''
$('#test').html(table)
$.ajax({
url: SITE_LOCAL + 'assets/report_json/test.json',
method: 'get',
dataType: 'json',
async: false,
cache: false,
success: function (feeds) {
// console.log(feeds)
hasil = feeds['channel']
hasil2 = feeds['feeds']
for (var i = 0; i &lt; hasil2.length; i++) {
var beach = hasil2[i];
// console.log(beach['created_at'])
table +=
"&lt;tr&gt;" +
"&lt;td&gt;&lt;/td&gt;" +
"&lt;td&gt;" + beach['created_at'] + "&lt;/td&gt;" +
"&lt;td&gt;" + beach['entry_id'] + "&lt;/td&gt;" +
"&lt;td&gt;" + beach['field1'] + "&lt;/td&gt;" +
"&lt;/td&gt;&lt;/tr&gt;"
}
$('#test').html(table)
}
});
}
</script> </pre>
