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

کدنویسی آموزش JSON

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

همانطور که طی آموزش های ارائه شده تا این مرحله ، متوجه شده اید ، یکی از اصلی ترین کاربردهای JSON ، دریافت و خواندن اطلاعات از یک وب سرور و سپس نمایش آنها به صورت ساختار یافته درون صفحات وب می باشد .
برای مثال ، یک سرور وب اطلاعات گروهی از افراد ، شامل نام ( firstName ) و نام خانوادگی ( lastName ) را توسط یک متغیر JSON به صورت زیر ارسال می کند :

syntax
کد	var text = '{ "employees" : [' + '{ "firstName":"John" , "lastName":"Doe" },' + '{ "firstName":"Anna" , "lastName":"Smith" },' +, '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

سپس در صفحه وب ، بایستی به وسیله JSON و جاوا اسکریپت ، این اطلاعات را خوانده و پس از پردازش ، آنها را بر روی صفحه نمایش دهیم .
متد ( نام متغیر ) JSON.parse ، یک متغیر متنی JSON را گرفته و آن را درون یک شی جاوا اسکریپت ، که دارای فیلدهای داده ای متناظر با خواص موجود در شی JSON می باشد ، ذخیره می کند .

syntax
کد	var obj = JSON.parse ( text ) ;

در مرحله بعد ، می توانیم اطلاعات هر یک از افراد موجود در لیست را به وسیله کد زیر و با اشاره به شماره اندیس آن نمایش دهیم :

syntax

کد

                                        <!DOCTYPE html>
< html>
   < body>
       < h2>  به یک شی جاوا اسکرپیت و خواندن و نمایش آن در صفحات وب JSON  تبدیل یک متغیر متنی </h2>
       < p id="demo"></p>
 
       < script>
           var text = '{ "employees" : [' +
                             '{ "firstName":"John" , "lastName":"Doe" },' +
                             '{ "firstName":"Anna" , "lastName":"Smith" },' +
                             '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

           obj = JSON.parse(text);  //  به شی جاوا اسکریپت JSON  تبدیل متن
           document.getElementById("demo").innerHTML = obj.employees[1].firstName + " " + obj.employees[1].lastName;     //   خواندن و ریختن مقادیر عضو دوم آرایه در یک پاراگراف
        </script>

</body> 
</html>

خروجی

استفاده از متد ( ) eval

در مرورگرهای قدیمی که از متد ( ) JSON.parse پشتیانی نمی کنند ، می توانید از متد ( ) eval ، به صورت زیر برای خواندن یک متغیر JSON ذخیره آن در یک شی جاوا اسکریپت استفاده کنید .
مثال : کد مثال فوق را با استفاده از متد ( ) eval بازسازی کرده و خروجی را مجددا نمایش داده ایم . به اختلاف های دو کد دقت نمایید :

syntax

کد

                                        <!DOCTYPE html>
< html>
   < body>
       < h2>  به یک شی جاوا اسکرپیت و خواندن و نمایش آن در صفحات وب JSON  تبدیل یک متغیر متنی </h2>
       < p id="demo2"></p>

       < script>
           var txt = '{ "employees" : [' +
                             '{ "firstName":"John" , "lastName":"Doe" },' +
                             '{ "firstName":"Anna" , "lastName":"Smith" },' +
                             '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

           var obj = eval("( " + txt + ")");                 // به شی جاوا اسکریپت JSON  روش دوم تبدیل متن
           document.getElementById("demo2").innerHTML = obj.employees[1].firstName + " " + obj.employees[1].lastName;
        </script>

</body> 
</html>

خروجی

نکات مهم در استفاده از متد ( ) eval :

متد ( ) evalمی تواند هر دستور یا اسکریپت را به صورت ورودی دریافت کرده و آن را اجرا کند . از این لحاظ ، متد ( ) eval ، دارای یک حفره امنیتی خطرناک بوده و بهتر است از آن استفاده نشود .
متد ( )JSON.parse ، هوشمند بوده و فقط متون JSON را پردازش کرده و از این لحاظ دارای امنیت بالایی است .
JSON و متد های آندر مرورگرهای زیر و ورژن های بالاتر آنها به صورت کامل پشتیبانی می شوند :

Firefox 3.5 .
Internet Explorer 8 .
Chrome .
Opera 10 .

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