Takip et

Javascript ile JSON Çıktısı Oluşturmak ve JSON Data Okumak

Merhaba, daha önce C# ile JSON Veri Okumak ve Parse Etmek ve JSON Çıktısı Oluşturmak ve JSON Data Okumak {PHP – MySQL} makalelerini sizlerle paylaşmıştım. Bir arkadaşımızın JSON okuma ve oluşturma işlemlerinin javascript ile nasıl yapıldığını öğrenmek istemesi nedeniyle bu makaleyi yazmaya karar verdim.

Bu makalede Javascript ile JSON Çıktısı Oluşturmak ve JSON Data Okumak konularını ele alacağız.

Öncelikle javascript ile örnek bir JSON çıktısı nasıl oluşturulur? Buna bakalım.

JSON Çıktısı Oluşturmak

stringify() fonksiyonu javascript içerisinde JSON string içeren dataları serialize etmek için kullanılır.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        var book = { 
            title: "Unutulanlar Dışında Yeni Bir Şey Yok",
            authors: ["Osman Pamukoğlu" ], 
            edition: 3,
            year: 2011
        }; 
        
        var jsonText = JSON.stringify(book); 
        document.writeln(jsonText);

    </script>

</head>
<body>
  
</body>
</html>

JSON Data Okumak

parse() fonksiyonu javascript içerisinde olan JSON verileri native javascript nesnelerine dönüştürür.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        var book = { 
            title: "Unutulanlar Dışında Yeni Bir Şey Yok",
            authors: ["Osman Pamukoğlu" ], 
            edition: 3,
            year: 2011
        }; 
        
        var jsonText = JSON.stringify(book); 
        document.writeln(jsonText);
        var bookCopy = JSON.parse(jsonText); 
        document.writeln(bookCopy);

    </script>

</head>
<body>
  
</body>

Bonus: jQuery ile JSON veri oluşturmak ve okumak

Yukarıda gördüğünüz yöntemler aslında artık çok sıklıkla kullanılan yöntemler değil. Bu işlemleri jQuery ile yapabileceğiniz gibi farklı javascript kütüphaneleri ile de yapabilirsiniz. Aşağıda bonus olarak jquery ile json veri oluşturmak ve okumak için bir örnek paylaşıyorum.

$(document).ready(function() {
  var jsonp = '[{"Lang":"jQuery","ID":"1"},{"Lang":"C#","ID":"2"}]';
  var lang = '';
  var obj = $.parseJSON(jsonp);
  $.each(obj, function() {
      lang += this['Lang'] + "<br/>";
  });
  $('span').html(lang);
});​

Soru, görüş ve önerilerinizi yorum bölümünden benimle paylaşabilirsiniz. Kolaylıklar dilerim.

Yorumlar
İçeriği beğendiniz mi? Bir tartışma başlatın veya görüşlerinizi paylaşın.
Yorum Yaz

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

E-posta Bülteni
Yazılım Topluluğuna Katılın
En son güncellemeleri, yaratıcı ipuçlarını ve özel kaynakları doğrudan e-posta kutunuza alın. Tasarım ve inovasyonun geleceğini birlikte keşfedelim.