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>

<!DOCTYPE html>

<html>

<head>

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>

<!DOCTYPE html>

<html>

<head>

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);
});

$(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.

Javascript

Permalink: https://fatihsoysal.com/blog/javascript-ile-json-ciktisi-olusturmak-json-data-okumak/

0 Yorum

Inline Feedbacks

View all comments

Freelance Proje İş Alımı

Kategoriler

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

JSON Çıktısı Oluşturmak

JSON Data Okumak

Bonus: jQuery ile JSON veri oluşturmak ve okumak

Fatih Soysal