JavaScript JSON

JSON چیست؟

JSON یک فرمت برای ذخیره و انتقال داده است. معمولاً از JSON زمانی استفاده می‌شود که داده از یک سرور به یک صفحه وب فرستاده شود.

JSON مخفف کلمات JavaScript Object Notation است. هرچند نحوه نوشتار JSON از نحوه نوشتار اشیاء جاوا اسکریپت تقلید می‌کند، اما فرمت JSON فقط یک متن است و کد لازم برای خواندن و یا تولید داده JSON می‌تواند به هر زبان برنامه نویسی‌ای نوشته شود.

مثال

این کد JSON یک شیء employees را تعریف می‌کند: یک آرایه با 3 رکورد:


            {
                  "employees":[ 

                    {"firstName":"John", "lastName":"Doe"}, 

                    {"firstName":"Anna", "lastName":"Smith"}, 

                    {"firstName":"Peter", "lastName":"Jones"} 

                  ]

                }

قوانین نوشتاری JSON

داده‌ها به صورت جفت اسم / مقدار هستند.
داده‌ها به وسیله علامت کاما از هم جدا می‌شوند.
آکولاد نگه‌دارنده اشیاء است.
کروشه نگه‌دارنده آرایه‌ها

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

یک استفاده رایج از JSON خواندن داده از یک سرور و نمایش آن روی یک صفحه وب است. برای این کار ابتدا یک رشته جاوا اسکریپت که دارای نوشتار JSON است را ایجاد کنید:


            let text = '{ "employees" : [' + 

            '{ "firstName":"John" , "lastName":"Doe" },' + 

            '{ "firstName":"Anna" , "lastName":"Smith" },' + 

            '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

سپس از تابع داخلی JSON.parse() جاوا اسکریپت برای تبدیل رشته ایجاد شده به شیء جاوا اسکریپت استفاده کنید:


            const obj = JSON.parse(text);

و سرانجام از شیء جدید ایجاد شده در صفحه وب خود استفاده کنید:

مثال:

<!DOCTYPE HTML>
<html>
  <body>
    <h2> Create Object from JSON String </h2>
    <p id = "demo"> </p>
    <script>
      let text = '{"employees":[' +
      '{"firstName":"John","lastName":"Doe" },' +
      '{"firstName":"Anna","lastName":"Smith" },' +
      '{"firstName":"Peter","lastName":"Jones" }]}';
      const obj = JSON.parse(text);
      document.getElementById("demo").innerHTML =
      obj.employees[1].firstName + " " + obj.employees[1].lastName;
    </script>
  </body>
</html>

خروجی:

در یک فصل مجزا در مورد JSON بسیار بیشتر خواهید آموخت.

<< مبحث قبلی مبحث بعدی >>