کار با اشیاء و آرایه های JSON در جاوا اسکریپت

اشیاء JSON

{ "name":"John", "age":30, "car":null }

اشیاء JSON درون curly brace علامت ({}) قرار گرفته و به صورت جفت های key/value نوشته می شوند. Key ها باید از نوع رشته باشند و Value ها نیز باید از نوع داده های مجاز JSON باشند (یعنی یا رشته، یا عدد، یا شیء، یا آرایه، یا بولین و یا null). در آخر نیز key ها باید با استفاده از علامت دو نقطه از value ها جدا شده و هر جفت key/value نیز با یک ویرگول انگلیسی از دیگر جفت ها جدا شود.

دسترسی به مقادیر شیء:

برای دسترسی داشتن به مقادیر یک شیء JSON می توانید از علامت نقطه (.) استفاده کنید:

<!DOCTYPE html>
<html>
<body>

<p>Access a JSON object using dot notation:</p>

<p id="demo"></p>

<script>
var myObj, x;
myObj = {"name":"John", "age":30, "car":null};
x = myObj.name;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

چنانچه با این روش راحت نیستید، می توانید از علامت براکت ([]) برای دسترسی به مقادیر این اشیاء استفاده کنید:

<!DOCTYPE html>
<html>
<body>

<p>Access a JSON object using bracket notation:</p>

<p id="demo"></p>

<script>
var myObj, x;
myObj = {"name":"John", "age":30, "car":null};
x = myObj["name"];
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

گردش (loop) در یک شیء:

برای گردش در خصوصیاتِ اشیاء JSON می توانید از حلقه ی for-in استفاده کنید:

<!DOCTYPE html>
<html>
<body>

<p>How to loop through all properties in a JSON object.</p>

<p id="demo"></p>

<script>
var myObj, x;
myObj = {"name":"John", "age":30, "car":null};
for (x in myObj) {
  document.getElementById("demo").innerHTML += x + "<br>";
}
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

همچنین برای گردش و دریافت مقادیر یک شیء JSON از همان علامت های براکت استفاده می کنیم:

<!DOCTYPE html>
<html>
<body>

<p>Use bracket notation to access the property values.</p>

<p id="demo"></p>

<script>
var myObj, x;
myObj = {"name":"John", "age":30, "car":null};
for (x in myObj) {
  document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

تو در تو (nesting) بودن اشیاء JSON:

مقدار یک خصوصیت در یک شیء JSON، می تواند یک شیء JSON دیگر باشد! مثال:

myObj = {
  "name":"John",
  "age":30,
  "cars": {
    "car1":"Ford",
    "car2":"BMW",
    "car3":"Fiat"
  }
 }

برای به دست آوردن مقادیر این نوع اشیاء تو در تو باز هم می توانیم از همان دو راه قبلی (علامت نقطه و علامت براکت) استفاده کنیم:

<!DOCTYPE html>
<html>
<body>

<p>How to access nested JSON objects.</p>

<p id="demo"></p>

<script>
var myObj = {
  "name":"John",
  "age":30,
  "cars": {
  "car1":"Ford",
  "car2":"BMW",
  "car3":"Fiat"
  }
}
document.getElementById("demo").innerHTML += myObj.cars.car2 + "<br>";
//or:
document.getElementById("demo").innerHTML += myObj.cars["car2"];
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

تغییر دادن مقادیر در اشیاء JSON:

ما می توانیم با استفاده از همان علامت نقطه و براکت مقادیر یک شیء JSON را تغییر بدهیم! مثال از تغییر یک مقدار با استفاده از علامت نقطه:

<!DOCTYPE html>
<html>
<body>

<p>How to modify values in a JSON object.</p>

<p id="demo"></p>

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

for (i in myObj.cars) {
  x += myObj.cars[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

مثال از تغییر یک مقدار با استفاده از علامت براکت:

<!DOCTYPE html>
<html>
<body>

<p>How to modify values in a JSON object using the bracket notation.</p>

<p id="demo"></p>

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

for (i in myObj.cars) {
  x += myObj.cars[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

حذف خصوصیات اشیاء JSON:

برای حذف یک خصوصیت از یک شیء JSON باید از کلیدواژه ی delete استفاده کنید:

<!DOCTYPE html>
<html>
<body>

<p>How to delete properties of a JSON object.</p>

<p id="demo"></p>

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

for (i in myObj.cars) {
  x += myObj.cars[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

آرایه های JSON

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

آرایه های JSON تقریبا با آرایه های جاوا اسکریپت یکی هستند. در JSON مقدار آرایه ها باید از نوع رشته، عدد، شیء، آرایه، بولین یا null باشند در صورتی که در آرایه های جاوا اسکریپتی علاوه بر تمام موارد قبلی می توانند شامل هر نوع expression دیگر جاوا اسکریپتی مانند توابع، تاریخ یا undefined نیز باشند.

همچنین آرایه های JSON می توانند به عنوان یک مقدار در اشیاء JSON قرار بگیرند:

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

دسترسی به مقادیر آرایه های JSON:

دسترسی به آرایه های JSON از طریق شماره ایندکس آن ها انجام می شود:

<!DOCTYPE html>
<html>
<body>

<p>Access an array value of a JSON object.</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>

مشاهده ی خروجی در JSBin

همچنین می توانید با حلقه ی for-in در این آرایه ها گردش انجام دهید و خصوصیات را دریافت کنید:

<!DOCTYPE html>
<html>
<body>

<p>Looping through an array using a for in loop:</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>

مشاهده ی خروجی در JSBin

البته شما مجبور به استفاده از for-in نیستید بلکه می توانید از حلقه ی for هم استفاده کنید:

<!DOCTYPE html>
<html>
<body>

<p>Loopin through an array using a for loop:</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>

مشاهده ی خروجی در JSBin

تو در تو بودن آرایه های JSON:

مقادیر یک آرایه ی JSON می توانند یک آرایه ی دیگر باشند که حتی در یک شیء JSON قرار گرفته اند! به مثال زیر توجه کنید:

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

بنابراین برای دسترسی به آن ها باید از حلقه ها استفاده کنیم؛ برای هر لایه از تو در تو رفتن از یک حلقه ی جداگانه استفاده کنید:

<!DOCTYPE html>
<html>
<body>

<p>Looping through arrays inside arrays.</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>

مشاهده ی خروجی در JSBin

تغییر مقدار آرایه های JSON:

برای این کار می توانیم از عدد ایندکس استفاده کنیم:

<!DOCTYPE html>
<html>
<body>

<p>How to modify an array value of a JSON object.</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>

مشاهده ی خروجی در JSBin

حذف مقادیر آرایه های JSON:

برای این کار از کلیدواژه ی delete استفاده میکنیم:

<!DOCTYPE html>
<html>
<body>

<p>How to delete properties of an 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>

مشاهده ی خروجی در JSBin

امیدوارم از این قسمت لذت برده باشید.