JavaScript'te basit bir JSON Dosyası okumak

İçerik olarak bununla birlikte bir JSON dosyasına sahibim:

{
    "residents": [
        {
            "name" : "Jacob",
            "title" : "King",
            "gender" : "Male",
        },
        {
            "name" : "Luthor",
            "title" : "Prince",
            "gender" : "Male"
        },
        {
            "name" : "Mileena",
            "title" : "Princess",
            "gender" : "Female"
        },
    ]
}

Json JavaScript okumak istiyorum ama kesinlikle, hiçbir fikrim yok. Bu problemle nasıl karşılaşabilirim?

0

10 cevap

Öncelikle ve en önemlisi json dizenizde hata var.

{
"residents": [
    {
        "name" : "Jacob",
        "title" : "King",
        "gender" : "Male",
    },
    {
        "name" : "Luthor",
        "title" : "Prince",
        "gender" : "Male"
    },
    {
        "name" : "Mileena",
        "title" : "Princess",
        "gender" : "Female"
    },
]

}

Sondan üçüncü parantezden sonra virgül olmayacak.

JSONString = '{. . . . } ';  JSONObject = JSON.parse (JSONString);

Bu yolla json verilerine JSONObject'den erişebilirsiniz.

1
katma
Ayrıca, dizenin >> "isim": "Yakup", "unvan": "Kral", "cinsiyet": "Erkek", << "erkek" ten sonra virgül olmayacak hatası var.
katma yazar yashgarg1232, kaynak

Böyle bir şey mi?

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

$(function() {

    $("#btnTest").click(function() {

        var data = {
            "residents": [{
                "name": "Jacob",
                    "title": "King",
                    "gender": "Male",
            }, {
                "name": "Luthor",
                    "title": "Prince",
                    "gender": "Male"
            }, {
                "name": "Mileena",
                    "title": "Princess",
                    "gender": "Female"
            }, ]
        };
     //If you're getting it somewhere from ajax call, than possibly it would be in string , in that case you need to `parse` it as  data = JSON.parse(data);
        $.each(data.residents, function (index, value) {
            $("#data").append(value.name + " " + value.title + " " + value.gender + " 
"); }); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnTest" value="Try Me!" />
<div id="data"> 
  </div>
</div> </div>
1
katma
@MyDestinyWP Üzgünüm, anlamadım, daha fazla bilgi verir misiniz?
katma yazar Mox Shah, kaynak
değişken ne olursa olsun, ancak bu JS dosyasının HTML'ye dahil edilmesi gerekir, bu da kullanacağınız JS'den önce olmalıdır.
katma yazar Mox Shah, kaynak
çok teşekkür ederim Moksh, bu gerçekten yardımcı olur. İşlevi bir düğmeye koyarsak, aynı şekilde devam eder mi?
katma yazar Matt, kaynak
Bunun için üzgünüm. Örneğin, bir tuşa sahibim ve ne zaman bastığımı "readjsonfile" adı verilen bir işlev olarak ayarladığımda, bu tuş için işlevi doğru olarak nasıl yapacağım? Fonksiyonu readjsonfile() olur mu, sonra ayrıştırmayı çağırır mı?
katma yazar Matt, kaynak
bu harika. (Y)
katma yazar Matt, kaynak
Son soru, eğer JSON değişkeni ayrı bir dosyadaysa, okumaya nasıl başlayabilirim? Okunamayacak mı yoksa işlev HTML dosyasında değilken hemen gösterilmeyecek mi?
katma yazar Matt, kaynak

Bunu dene..

var mymessage='{
    "residents": [
        {
            "name" : "Jacob",
            "title" : "King",
            "gender" : "Male",
        },
        {
            "name" : "Luthor",
            "title" : "Prince",
            "gender" : "Male"
        },
        {
            "name" : "Mileena",
            "title" : "Princess",
            "gender" : "Female"
        },
    ]
}';
var jsonData = JSON.parse(myMessage);
for (var i = 0; i < jsonData.residents.length; i++) {
    var resident= jsonData.residents[i];
    console.log(resident.name);
}
1
katma

bunu dene


<html>
<head>
<script>
var data={
    "residents": [
        {
            "name" : "Jacob",
            "title" : "King",
            "gender" : "Male",
        },
        {
            "name" : "Luthor",
            "title" : "Prince",
            "gender" : "Male"
        },
        {
            "name" : "Mileena",
            "title" : "Princess",
            "gender" : "Female"
        },
    ]
}
for(var i=0;i
1
katma

Bunun için jQuery kullanabilirsiniz.

$.ajax({
   url: "\data.json", //name of your json file
   success: function (data) {
      var obj = JSON.parse(data);
   }
});

Sonra arayarak gerekli özellik alabilirsiniz:

obj.residents[0].name

ve bunun gibi.

1
katma

Aşağıdaki gibi getirebilirsin

var text = '{
"residents":[
{
    "name" : "Jacob",
    "title" : "King",
    "gender" : "Male",
},
{
    "name" : "Luthor",
    "title" : "Prince",
    "gender" : "Male"
},
{
    "name" : "Mileena",
    "title" : "Princess",
    "gender" : "Female"
},
]

}';//That is your data from request

var obj = JSON.parse(text);
alert(obj.residents);
alert(obj.residents[0].name);
1
katma
<script>
    json_text = '{
    "residents":[
             {
                 "name" : "Jacob",
                 "title" : "King",
                 "gender" : "Male",
             },
             {
                 "name" : "Luthor",
                 "title" : "Prince",
                 "gender" : "Male"
             },
             {
                 "name" : "Mileena",
                 "title" : "Princess",
                 "gender" : "Female"
             },
        ]}';
        var obj = JSON.parse(json_text);
        alert(obj.residents[2].name);
</script>

Bu kod, tarayıcıda sakinleri dizisindeki ikinci nesnenin name özniteliğinin değerine sahip bir uyarı iletişim kutusu açar.

1
katma
Evet aynı şekilde çalışırdı.
katma yazar Kantha Girish, kaynak
Teşekkür ederim :) İşlevi bir düğmeye koyarsak, aynı şekilde devam eder mi?
katma yazar Matt, kaynak

Javascript kullanarak sadece yapardın ...

obj = JSON.parse({
"residents": [
    {
        "name" : "Jacob",
        "title" : "King",
        "gender" : "Male",
    },
    {
        "name" : "Luthor",
        "title" : "Prince",
        "gender" : "Male"
    },
    {
        "name" : "Mileena",
        "title" : "Princess",
        "gender" : "Female"
    },
]
});

Artık JSON'u yönetebileceğiniz bir nesneye sahipsiniz.

console.log(obj);
1
katma

Bunun web etiketiniz nedeniyle web için olduğunu varsayarsak, en kolay yöntem jQuery 'u kullanmaktır.

$.get('http://ip.jsontest.com', function(data) { console.log(data); });

Sunucu, JSON ın cevabında doğru MIME türünü kullanıyorsa, jQuery onu bir nesneye dönüştürecek ve yukarıdaki örnekte "veri" değerlendirilen JSON olacaktır.

If the server does not use the correct MIME type you can wrap it in JSON.parse:

 var json = JSON.parse(data);
1
katma

Kullandığınız ortama bağlıdır.
Node.js ile çalışıyorsanız, bu dosyayı API ile okumalısınız - fileRead
O zaman JSON.parse öğesini {Object} içinde ayrıştırmak için kullanmalısınız.

Tarayıcıda çalışıyorsanız ve bazı sunucular bu dosyada statik yol kullanıyorsa, bu dosyayı almak için ajax kullanabilirsiniz.

Her iki durumda da, bu adımları yapmanız gerekir:

  1. Dosyayı {String} olarak al
  2. {Object}
  3. ile ayrıştırın
0
katma
Ben sadece bir başlangıç ​​olduğum için çok temel olmasını istiyorum. Diğer yolların ne olduğunu henüz anlamadım.
katma yazar Matt, kaynak