Daftar dan Belajar Sekarang!

Cara menampilkan File json untuk ditampilkan ke tabel .html

foto ajunando
2 Kontribusi 0 Coto
4 bulan yang lalu
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?  https://dashboardmonitoring.000webhostapp.com/images/result.png 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
  • beda post sama ini kah? https://sekolahkoding.com/forum/ubah-data-json-untuk-ditampilkan-ke-tabel-1562632282 - dianarifr
  • beda kak, lebih spesifik aja kalau yg ini. Kira" bisa bantu source codenya ngga ya? biar mirip sama tabel gambar diatas - ajunando

Jawaban
foto dimashpt
38 Kontribusi 1 Coto
4 bulan yang lalu
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
  • bisa bantuin saya tidak gan? source codenya gimana ya untuk menampilkan tabel diatas - ajunando
  • https://www.bewoksatukosong.com/2017/07/cara-menampilkan-data-json-parsing-menggunakan-php.html?m=1 << PHP https://jagowebdev.com/json-pada-javascript-panduan-lengkap/ << Js - dimashpt

foto Ridhoa
110 Kontribusi 29 Coto
4 bulan yang lalu
kodingan nya kira2 seperti ini di sesuai kan aja, semoga membantu
<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 < hasil2.length; i++) {
                    var beach = hasil2[i];
                    // console.log(beach['created_at'])
                    table +=
                        "<tr>" +
                        "<td></td>" +
                        "<td>" + beach['created_at'] + "</td>" +
                        "<td>" + beach['entry_id'] + "</td>" +
                        "<td>" + beach['field1'] + "</td>" +
                        "</td></tr>"
                }
                $('#test').html(table)
            }
        });
    }
</script>


Login untuk diksusi di forum sekolah koding