Selamat datang di blog Mari belajar coding. Jika tutorial sebelumnya kita pernah belajar membuat file xml dan menampilkan datanya dengan PHP. Tutorial kali ini kita akan belajar bagaimana cara menampilkan data xml menggunakan javascript. Seperti halnya tutorial untuk menampilkan data json, cara menampilkan data xml dengan javascript bisa menggunakan beberapa cara. Dalam tutorial ini kita akan menggunakan dua cara, yaitu menggunakan javascript XMLHttpRequest dan jquery.
Menampilkan Data XML dengan Javascript
Pertama-tama kita siapkan data xml terlebih dahulu. Dalam tutorial ini kita gunakan data mahasiswa.xml sebagai contoh data yang akan kita tampilkan.
<?xml version="1.0" encoding="UTF-8"?>
<Akademik>
<mahasiswa nim="1234">
<nama>Dian Syahputra</nama>
<alamat>Semarang</alamat>
<jurusan>Teknik Informatika</jurusan>
</mahasiswa>
<mahasiswa nim="1236">
<nama>Jojo</nama>
<alamat>Surabaya</alamat>
<jurusan>Sastra Inggris</jurusan>
</mahasiswa>
</Akademik>
File mahasiswa.xml jika kita jalankan melalui browser.
Untuk cara pertama kita menggunakan XMLHttpRequest, buat file latihan1.html seperti dibawah ini.
Untuk cara pertama kita menggunakan XMLHttpRequest, buat file latihan1.html seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Mari Belajar Coding</title>
<script type="text/javascript">
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
xmlDoc = xhttp.responseXML;
var mahasiswa= xmlDoc.getElementsByTagName("mahasiswa");
var data="";
for(i=0;i<mahasiswa.length;i++){
var mhsw = mahasiswa[i];
if (mhsw.nodeType == Node.ELEMENT_NODE) {
var nim=mhsw.getAttribute("nim");
var nama=mhsw.getElementsByTagName("nama")[0].childNodes[0].data;
var alamat=mhsw.getElementsByTagName("alamat")[0].childNodes[0].data;
var jurusan=mhsw.getElementsByTagName("jurusan")[0].childNodes[0].data;
data +="<tr><td>"+nim+"</td><td>"+nama+"</td><td>"+alamat+"</td><td>"+jurusan+"</td></tr>";
}
}
//tampilkan di tabel id TabelDataMahasiswa;
document.getElementById("TabelDataMahasiswa").innerHTML=data;
}
};
xhttp.open("GET", "mahasiswa.xml", true);
xhttp.send();
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Nim</th>
<th>Nama</th>
<th>Alamat</th>
<th>Jurusan</th>
</tr>
</thead>
<tbody id="TabelDataMahasiswa"></tbody>
</table>
</body>
</html>
Tampilan file latihan1.html jika di jalankan di browser.
Cara yang kedua kita akan menggunakan jquery untuk menampilkan data xml. Tambahkan jquery.js didalam tag head untuk menggunakan fungsinya. Salin kode dibawah ini kemudian simpan file dengan nama latihan2.html.
<!DOCTYPE html>
<html>
<head>
<title>Mari Belajar Coding</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.get('mahasiswa.xml', function(data) {
var datatabel = "";
$(data).find('mahasiswa').each(function() {
var $mahasiswa = $(this);
var nim = $mahasiswa.attr("nim");
var nama = $mahasiswa.find('nama').text();
var alamat = $mahasiswa.find('alamat').text();
var jurusan = $mahasiswa.find('jurusan').text();
datatabel += "<tr><td>" + nim + "</td><td>" + nama + "</td><td>" + alamat + "</td><td>" + jurusan + "</td></tr>";
});
document.getElementById("TabelDataMahasiswa").innerHTML = datatabel;
});
});
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Nim</th>
<th>Nama</th>
<th>Alamat</th>
<th>Jurusan</th>
</tr>
</thead>
<tbody id="TabelDataMahasiswa"></tbody>
</table>
</body>
</html>
Kita juga bisa menampilkan data xml menggunakan ajax jquery seperti dibawah ini. Simpan dengan nama latihan3.html.
<!DOCTYPE html>
<html>
<head>
<title>Mari Belajar Coding</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var datatabel = "";
$.ajax({
method: "GET",
url: "mahasiswa.xml",
dataType: "xml",
}).done(function( msg ) {
$(msg).find("mahasiswa").each(function () {
var $mahasiswa = $(this);
var nim = $mahasiswa.attr("nim");
var nama = $mahasiswa.find('nama').text();
var alamat = $mahasiswa.find('alamat').text();
var jurusan = $mahasiswa.find('jurusan').text();
datatabel += "<tr><td>" + nim + "</td><td>" + nama + "</td><td>" + alamat + "</td><td>" + jurusan + "</td></tr>";
});
document.getElementById("TabelDataMahasiswa").innerHTML = datatabel;
});
});
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Nim</th>
<th>Nama</th>
<th>Alamat</th>
<th>Jurusan</th>
</tr>
</thead>
<tbody id="TabelDataMahasiswa"></tbody>
</table>
</body>
</html>
Related Search:
Menampilkan data XML dengan Javascript
Menampilkan data XML dengan Jquery
Menampilkan data XML dengan Ajax
Parsing data XML dengan Javascript
Menampilkan data XML dengan Javascript
Menampilkan data XML dengan Jquery
Menampilkan data XML dengan Ajax
Parsing data XML dengan Javascript