Get multiple data from url using jQuery

Question

I have this code for a table:

<table class="table table-hover">
                          <thead>
                          <tr>
                              <th>ID Komponen</th>
                              <th>Nama Komponen</th>
                              <th>Ekuivalen SKS</th>
                              <th>Ekuivalen Jam</th>
                              <th>Indikator</th>
                          </tr>

                          </thead>
                          <tbody id="badan_tabel" >

                          </tbody>
                      </table>

and the jQuery code:

  <script > function init() { $.get("http://paramadina.net:18011/data/psc_komponen", {id:1}, function(data) { console.log(data); var tr="<tr><td>" + data.id + "</td>"; tr += "<td>" + data.nama_komponen + "</td>"; tr += "<td>" + data.ekuivalen_sks + "</td>"; tr += "<td>" + data.ekuivalen_jam + "</td>"; tr += "<td>" + data.indikator + "</td></tr>"; $("#badan_tabel").append(tr); }); } </script> 

as you see I get the data by per id {id:1}. It has about 20 data and I want to put it all into the table. I don't know how to call all data id at once

Answer 1

  <script > function init() { for(x=1;x<=20;x++) { $.get("http://paramadina.net:18011/data/psc_komponen", {id:x}, function(data) { console.log(data); var tr="<tr><td>" + data.id + "</td>"; tr += "<td>" + data.nama_komponen + "</td>"; tr += "<td>" + data.ekuivalen_sks + "</td>"; tr += "<td>" + data.ekuivalen_jam + "</td>"; tr += "<td>" + data.indikator + "</td></tr>"; $("#badan_tabel").append(tr); }); } } </script> 

Answer 2

Can't you get a JSON array response, instead of hammering this poor webserver 20 times in a row ?

[
    {
        "id": 1,
        "nama_komponen": "Tugas Belajar",
        "ekuivalen_sks": 17,
        "ekuivalen_jam": 40,
        "indikator": "Surat Tugas|Surat Kontrak"
    },
    {
        "id": 2,
        "nama_komponen": "Penelitian",
        "ekuivalen_sks": 6,
        "ekuivalen_jam": 24,
        "indikator": "Surat Tugas"
    }, 
    {
        "id": 3,
        "nama_komponen": "Tugas Belajar",
        "ekuivalen_sks": 17,
        "ekuivalen_jam": 40,
        "indikator": "Surat Tugas|Surat Kontrak"
    }, 

    etc ...
]

Answer 3

I'm not sure how to you getting the data, but here is something that worked

<?php
//data from database usually in this format
//pass the id to your db query here, 
//e.g if you use function $a = $_GET['id'];
// $data = call_user_function('function_name',$a);
$data = array(array("id"=> 1,  "nama_komponen"=>"Tugas Belajar",    "ekuivalen_sks"=> 17,"ekuivalen_jam"=>40, "indikator"=> "Surat Tugas|Surat Kontrak"), 
        array("id"=> 2, "nama_komponen"=>"Tugas 22Belajar", "ekuivalen_sks"=> 172,  "ekuivalen_jam"=>40,  "indikator"=> "Surat Tugas|Surat Kontrak"));

//convert 
foreach($data as $dat):
    $a = $dat['id'];
    $b = $dat['nama_komponen'];
    $c = $dat['ekuivalen_sks'];
    $d = $dat['ekuivalen_jam'];
    $e = $dat['indikator'];
    $json[] = array("id"=>$a, "nama_komponen"=>$b, "ekuivalen_sks"=>$c, "ekuivalen_jam"=>$d, "indikator"=> $e);
endforeach;
header("Content-type: application/json");
echo json_encode($json);
?>

the output of the abouve in the console is

[object, object]

So your script will to give desired output is

<script>
$(function() {
$.get("ajax.php", {id:1}, function(data) {
        console.log(data);
        $.each(data, function (index, value) {        

             tr="<tr><td>" + value.id + "</td>";
                tr += "<td>" + value.nama_komponen + "</td>";
                tr += "<td>" + value.ekuivalen_sks + "</td>";
                tr += "<td>" + value.ekuivalen_jam + "</td>";
                tr += "<td>" + value.indikator + "</td></tr>";
                $("#badan_tabel").append(tr);
        });

});
});