Kursus Membuat Web

iklan

JSON Fungsi File

Penggunaan umum dari JSON adalah untuk membaca data dari web server, dan menampilkan data tersebut ke sebuah halaman web.

Berikut 4 langkah mudah, cara membaca data JSON, menggunakan fungsi file.

Contoh JSON

Ini contoh membaca file myTutorials.js, dan menampilkan isinya di halaman web :

Contoh JSON
<!doctype html>
<html lang="id">
  <head>
	<title>Contoh JSON Fungsi Files</title>
	<meta  charset="UTF-8">
  </head>
  <body>
		<div id="id01"></div>
		<script>
			  function myFunction(arr) {
			  var out = "";
			  var i;
			  for(i = 0; i<arr.length; i++) {
			  out += '<a href="' + arr[i].url + '">' + 
			  arr[i].display + '</a><br>';
			  }
			  document.getElementById("id01").innerHTML = out;
			  }
			  </script>
		<script src="myTutorials.js"></script>
	</body>
</html>

Lihat ...

Penjelasan Contoh

1 : Membuat array objek.

Menggunakan sebuah array literal untuk mendeklarasikan array objek.

Memberikan setiap objek dua properti : display dan url.

Nama array adalah myArray :

var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.kursus-membuat-web.com/javascript/index.php"
},
{
"display": "HTML Tutorial",
"url": "http://www.kursus-membuat-web.com/html/index.php"
},
{
"display": "CSS Tutorial",
"url": "http://www.kursus-membuat-web.com/css/index.php"
}
]

2 : Membuat fungsi JavaScript untuk menampilkan array.

Membuat fungsi myFunction ( ) yang me-loop objek array, dan menampilkan konten sebagai link HTML :

myFunction()
function myFunction(arr) {
	 var out = "";
		var i;
		for(i = 0; i < arr.length; i++) {
		out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>';
		}
			document.getElementById("id01").innerHTML = out;
}

Panggil myFunction ( ) dengan myArray sebagai argumen :

Contoh
myFunction(myArray); 

3 : Menggunakan sebuah array literal sebagai argumen ( bukan variabel array) :

Panggil myFunction ( ) dengan array literal sebagai argumen :

Memanggil myFunction()
myFunction([
{
"display": "JavaScript Tutorial",
"url": "http://kursus-membuat-web.com/javascript/index.php"
},
{
"display": "HTML Tutorial",
"url": "http://kursus-membuat-web.com/html/index.php"
},
{
"display": "CSS Tutorial",
"url": "http://kursus-membuat-web.com/css3/index.php"
}
]);

4 : Menempatkan fungsi dalam file js eksternal

Masukkan fungsi dalam sebuah file bernama myTutorials.js :

myTutorials.js
myFunction([
{
"display": "JavaScript Tutorial",
"url": "http://kursus-membuat-web.com/javascript/index.php"
},
{
"display": "HTML Tutorial",
"url": "http://kursus-membuat-web.com/html/index.php"
},
{
"display": "CSS Tutorial",
"url": "http://kursus-membuat-web.com/css3/index.php"
}
]);

Tambahkan script eksternal ke halaman Anda :

Menambah Script Eksternal
<script src="myTutorials.js"></script>
Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015