رفتن به نوشته‌ها
کار با تابع ()JSON.stringify + استفاده از JSON در HTML

کار با تابع ()JSON.stringify + استفاده از JSON در HTML

تابع ()JSON.stringify چه کاری می کند؟

در جلسه ی قبل با تابع JSON.parse آشنا شدیم و گفتیم که در هنگام دریافت اطلاعات از سرور می توانیم با JSON.parse رشته ی JSON را parse (تجزیه) کنیم. امروز می خواهیم توضیحاتی در مورد ارسال اطلاعات به سرور ارائه کنیم؛ هنگامی که میخواهیم اطلاعاتی را به سرور ارسال کنیم، داده ها رشته ای خواهند بود. ما می توانیم اشیاء جاوا اسکریپت را با استفاده از تابع ()JSON.stringify به یک رشته تبدیل کنیم (یعنی دقیقا برعکس تابع JSON.parse).

تصور کنید که این شیء جاوا اسکریپتی را داشته باشیم:

var obj = { name: "John", age: 30, city: "New York" };

با استفاده از JSON.stringify می توانیم آن را به یک رشته تبدیل کنیم:

var myJSON = JSON.stringify(obj);

خروجی این کد یک رشته خواهد بود که بر اساس قواعد نگارش JSON نوشته شده است. myJSON حالا یک رشته است و میتواند در سرور مورد استفاده قرار بگیرد:

<!DOCTYPE html>
<html>
<body>

<h2>Create JSON string from a JavaScript object.</h2>

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

<script>
var obj = { name: "John", age: 30, city: "New York" };
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

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

ما می توانیم آرایه ها را نیز به صورت رشته ای در بیاوریم. به طور مثال اگر آرایه ی زیر را داشته باشیم:

var arr = [ "John", "Peter", "Sally", "Jane" ];

می توانیم از JSON.stringify استفاده کنیم تا آن را به یک رشته تبدیل کنیم:

var myJSON = JSON.stringify(arr);

خروجی این کد نیز یک رشته خواهد بود که بر اساس قواعد نگارش JSON نوشته شده است. حالا myJSON باز هم یک رشته است که میتواند در سمت سرور کار کند:

<!DOCTYPE html>
<html>
<body>

<h2>Create JSON string from a JavaScript array.</h2>

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

<script>

var arr = [ "John", "Peter", "Sally", "Jane" ];
var myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;

</script>

</body>
</html>

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

در مورد ارسال JSON به سرور در جلسات بعد صحبت خواهیم کرد.

موارد استثنائی

همانطور که می‌دانید تاریخ ها در JSON غیر مجاز هستند بنابراین می توانیم از ()JSON.stringify استفاده کنیم و هر نوع تاریخی را به صورت رشته در بیاوریم:

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify will convert any date objects into strings.</h2>

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

<script>
var obj = { name: "John", today: new Date(), city: "New York" };
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

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

از دیگر موارد غیر مجاز در JSON، توابع هستند. ممکن است فکر کنید که تابع JSON.stringify توابع را به صورت رشته ای در می‌آورد اما اشتباه می کنید! تابع JSON.stringify در صورت برخورد با توابع هم key و هم value را حذف می کند:

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify will remove any functions from an object.</h2>

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

<script>
var obj = { name: "John", age: function () {return 30;}, city: "New York" };
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

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

بنابراین تمام تابع شما حذف می شود. اگر میخواهید توابع‌تان حذف نشوند باید قبل از اینکه آن ها را به دستور JSON.stringify بدهید، آن ها را تبدیل به رشته کنید. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify will remove any functions from an object.</h2>

<p>Convert the functions into strings to keep them in the JSON object.</p>

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

<script>
var obj = { name: "John", age: function () {return 30;}, city: "New York" };
obj.age = obj.age.toString();
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

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

همانطور که در قسمت قبل گفتیم این کار به هیچ عنوان پیشنهاد نمی شود چرا که دردسر ها و خطاهای خودش را دارد و توابع نیز scope خود را از دست می دهند.

پشتیبانی در مرورگر ها

تابع ()JSON.stringify در تمام مروگر های مدرن و آخرین نسخه ی ECMAScript نیز پشتیبانی می شود. به طور دقیق تر:

  • chrome: همیشه پشتیبانی می کرده است.
  • IE/Edge: از نسخه ی 8 به بعد پشتیبانی می کند.
  • FireFox: از نسخه ی 3.5 به بعد پشتیبانی می کند.
  • Safari: از نسخه ی 4 به بعد پشتیبانی می کند.
  • Opera: از نسخه ی 10 به بعد پشتیبانی می کند.

JSON در HTML

گفتیم که JSON می تواند به راحتی تبدیل به جاوا اسکریپت شود، بنابراین می توانیم از این قابلیت استفاده کنیم تا کدهای HTML بسازیم.

به طور مثال ابتدا سراغ یک جدول HTML می رویم:

<!DOCTYPE html>
<html>
<body>

<h2>Make a table based on JSON data.</h2>

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

<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { table: "customers", limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    myObj = JSON.parse(this.responseText);
    txt += "<table border='1'>"
    for (x in myObj) {
      txt += "<tr><td>" + myObj[x].name + "</td></tr>";
    }
    txt += "</table>"    
    document.getElementById("demo").innerHTML = txt;
  }
};
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
</script>

</body>
</html>

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

حالا می توانیم جدول را کمی پویا تر کنیم:

<!DOCTYPE html>
<html>
<body>

<h2>Make a table based on the value of a drop down menu.</h2>

<select id="myselect" onchange="change_myselect(this.value)">
  <option value="">Choose an option:</option>
  <option value="customers">Customers</option>
  <option value="products">Products</option>
  <option value="suppliers">Suppliers</option>
</select>

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

<script>
function change_myselect(sel) {
  var obj, dbParam, xmlhttp, myObj, x, txt = "";
  obj = { table: sel, limit: 20 };
  dbParam = JSON.stringify(obj);
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myObj = JSON.parse(this.responseText);
      txt += "<table border='1'>"
      for (x in myObj) {
        txt += "<tr><td>" + myObj[x].name + "</td></tr>";
      }
      txt += "</table>"    
      document.getElementById("demo").innerHTML = txt;
      }
    };
  xmlhttp.open("POST", "json_demo_db_post.php", true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send("x=" + dbParam);
}
</script>

</body>
</html>

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

حتی می توانیم از جدول استفاده نکنیم بلکه داده ها را به صورت JSON گرفته و سپس آن ها را در لیست dropdown قرار دهیم! به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>Make a drop down list based on JSON data.</h2>

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

<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { table: "customers", limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    myObj = JSON.parse(this.responseText);
    txt += "<select>"
    for (x in myObj) {
      txt += "<option>" + myObj[x].name;
    }
    txt += "</select>"
    document.getElementById("demo").innerHTML = txt;
  }
};
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
</script>

</body>
</html>

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

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

منتشر شده در برنامه نویسیJavaScript (جاوا اسکریپت)