Javascript

JSON Array: Cara Membuat dan Contoh Codenya

Array sebagai Objek JSON

Contoh:

["Ford", "BMW", "Fiat"]

Array di JSON hampir sama dengan array di JavaScript.

Di JSON, nilai array harus berjenis string, number, object, array, boolean or null.

Dalam JavaScript, nilai array bisa semuanya di atas, ditambah ekspresi JavaScript valid lainnya, termasuk fungsi, tanggal, dan tidak ditentukan.

Array di Objek JSON

Array bisa menjadi nilai properti objek.

Contoh:

"name":"John",
"age":30,
"cars":[ "Ford", "BMW", "Fiat" ]
}

Mengakses Nilai Array

Cara mengakses nilai array adalah dengan menggunakan nomor indeks.

Contoh:

<!DOCTYPE html>
<html>
<body>

<p> Mengakses nilai array dari objek JSON. </p>
<p id="demo"></p>

<script>
var myObj, x;
myObj = {
  "name":"John",
  "age":30,
  "cars":[ "Ford", "BMW", "Fiat" ]
};
x = myObj.cars[0];
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Looping Melalui Array

Anda dapat mengakses nilai array dengan menggunakan for-in loop.

Contoh:

<!DOCTYPE html>
<html>
<body>

<p> Perulangan melalui array menggunakan perulangan for in</p>
<p id="demo"></p>

<script>
var myObj, i, x = "";
myObj = {
  "name":"John",
  "age":30,
  "cars":[ "Ford", "BMW", "Fiat" ]
};

for (i in myObj.cars) {
  x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Atau dapat juga menggunakan for loop:

<!DOCTYPE html>
<html>
<body>

<p> Perulangan melalui array menggunakan perulangan for: </p>
<p id="demo"></p>

<script>
var myObj, i, x = "";
myObj = {
  "name":"John",
  "age":30,
  "cars":[ "Ford", "BMW", "Fiat" ]
};

for (i = 0; i < myObj.cars.length; i++) {
  x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Array Bersarang di Objek JSON

Nilai dalam array juga bisa berupa array lain, atau bahkan objek JSON lain.

Contoh:

myObj = {
  "name":"John",
  "age":30,
  "cars": [
    { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
    { "name":"BMW", "models":[ "320", "X3", "X5" ] },
    { "name":"Fiat", "models":[ "500", "Panda" ] }
  ]
 }

Untuk mengakses array di dalam array, gunakan for-in loop untuk setiap array:

<!DOCTYPE html>
<html>
<body>

<p> Perulangan melalui array di dalam array. </p>
<p id="demo"></p>

<script>
var myObj, i, j, x = "";
myObj = {
  "name":"John",
  "age":30,
  "cars": [
    {"name":"Ford", "models":["Fiesta", "Focus", "Mustang"]},
    {"name":"BMW", "models":["320", "X3", "X5"]},
    {"name":"Fiat", "models":["500", "Panda"] }
  ]
}
for (i in myObj.cars) {
  x += "<h2>" + myObj.cars[i].name + "</h2>";
  for (j in myObj.cars[i].models) {
    x += myObj.cars[i].models[j] + "<br>";
  }
}
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Ubah Nilai Array

Gunakan nomor indeks untuk mengubah array.

Contoh:

<!DOCTYPE html>
<html>
<body>

<p> Cara mengubah nilai array dari objek JSON. </p>
<p id="demo"></p>

<script>
var myObj, i, x = "";
myObj = {
  "name":"John",
  "age":30,
  "cars":[ "Ford", "BMW", "Fiat" ]
};
myObj.cars[1] = "Mercedes";

for (i in myObj.cars) {
  x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Hapus Item Array

Gunakan kata kunci delete untuk menghapus item dari array.

Contoh:

<!DOCTYPE html>
<html>
<body>

<p>Cara menghapus properti array.</p>
<p id="demo"></p>

<script>
var myObj, i, x = "";
myObj = {
  "name":"John",
  "age":30,
  "cars": ["Ford","BMW","Fiat"]
}
delete myObj.cars[1];

for (i in myObj.cars) {
  x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


Catur Kurnia Sari

Share
Tags: arrayjavascript