Javascript cara mengurai array JSON


93

Saya menggunakan Sencha Touch (ExtJS) untuk mendapatkan pesan JSON dari server. Pesan yang saya terima adalah yang ini:

{
"success": true,
"counters": [
    {
        "counter_name": "dsd",
        "counter_type": "sds",
        "counter_unit": "sds"
    },
    {
        "counter_name": "gdg",
        "counter_type": "dfd",
        "counter_unit": "ds"
    },
    {
        "counter_name": "sdsData",
        "counter_type": "sds",
        "counter_unit": "   dd       "
    },
    {
        "counter_name": "Stoc final",
        "counter_type": "number    ",
        "counter_unit": "litri     "
    },
    {
        "counter_name": "Consum GPL",
        "counter_type": "number    ",
        "counter_unit": "litri     "
    },
    {
        "counter_name": "sdg",
        "counter_type": "dfg",
        "counter_unit": "gfgd"
    },
    {
        "counter_name": "dfgd",
        "counter_type": "fgf",
        "counter_unit": "liggtggggri     "
    },
    {
        "counter_name": "fgd",
        "counter_type": "dfg",
        "counter_unit": "kwfgf       "
    },
    {
        "counter_name": "dfg",
        "counter_type": "dfg",
        "counter_unit": "dg"
    },
    {
        "counter_name": "gd",
        "counter_type": "dfg",
        "counter_unit": "dfg"
    }

    ]
}

Masalah saya adalah bahwa saya tidak dapat mengurai objek JSON ini sehingga saya dapat menggunakan setiap objek penghitung.

Saya mencoba untuk melakukannya seperti ini:

var jsonData = Ext.util.JSON.decode(myMessage);
for (var counter in jsonData.counters) {
     console.log(counter.counter_name);
 }

Apa yang saya lakukan salah? Terima kasih!


1
Kemungkinan duplikat dari Aman mengubah string JSON menjadi objek
T.Todua

Jawaban:


142

Javascript memiliki parse JSON bawaan untuk string, yang menurut saya adalah apa yang Anda miliki:

var myObject = JSON.parse("my json string");

untuk menggunakan ini dengan contoh Anda akan menjadi:

var jsonData = JSON.parse(myMessage);
for (var i = 0; i < jsonData.counters.length; i++) {
    var counter = jsonData.counters[i];
    console.log(counter.counter_name);
}

Berikut adalah contoh yang berfungsi

EDIT : Ada kesalahan dalam penggunaan loop for Anda (Saya melewatkan ini pada pembacaan pertama saya, kredit untuk @Evert untuk tempat). menggunakan for-in loop akan menyetel var menjadi nama properti loop saat ini, bukan data aktual. Lihat loop saya yang diperbarui di atas untuk penggunaan yang benar

PENTING : JSON.parsemetode ini tidak akan berfungsi di browser lama - jadi jika Anda berencana untuk membuat situs web Anda tersedia melalui koneksi internet yang lama, ini bisa menjadi masalah! Jika Anda benar-benar tertarik, berikut adalah bagan dukungan (yang menandai semua kotak saya).


1
Jika dia menggunakan pustaka yang mendukung fungsi parseJSON lintas-browser, dia harus menggunakannya. Juga, Anda mengulangi kesalahan pengulangan.
Bergi

Saya mendapatkan kesalahan pada baris pertama ketika saya menjalankan ini: Kesalahan Sintaks yang Tidak Tertangkap: Token tidak terduga o
malam

@nights: Kemungkinan besar Anda memiliki string JSON yang tidak valid, coba alat validasi JSON online, seperti ini
musefan

8

Inilah jawaban saya,

<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p>
First Name: <span id="fname"></span><br> 
Last Name: <span id="lname"></span><br> 
</p> 
<script>
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

//var jsonData = eval ("(" + txt + ")");
var jsonData = JSON.parse(txt);
for (var i = 0; i < jsonData.employees.length; i++) {
    var counter = jsonData.employees[i];
    //console.log(counter.counter_name);
    alert(counter.firstName);
}

</script>
</body>
</html>

6

Dalam for-in-loop variabel yang sedang berjalan menyimpan nama properti, bukan nilai properti.

for (var counter in jsonData.counters) {
    console.log(jsonData.counters[counter].counter_name);
}

Tetapi karena counter adalah Array, Anda harus menggunakan for-loop normal:

for (var i=0; i<jsonData.counters.length; i++) {
    var counter = jsonData.counters[i];
    console.log(counter.counter_name);
}

1

"Cara Sencha" untuk berinteraksi dengan data server sedang disiapkan dengan Ext.data.Storeproxy Ext.data.proxy.Proxy(dalam hal ini Ext.data.proxy.Ajax) dilengkapi dengan Ext.data.reader.Json(untuk data yang dikodekan JSON, ada pembaca lain yang tersedia juga). Untuk menulis data kembali ke server ada Ext.data.writer.Writerbeberapa jenis.

Berikut contoh penyiapan seperti itu:

    var store = Ext.create('Ext.data.Store', {
        fields: [
            'counter_name',
            'counter_type',
            'counter_unit'
        ],

        proxy: {
            type: 'ajax',
            url: 'data1.json',

            reader: {
                type: 'json',
                idProperty: 'counter_name',
                rootProperty: 'counters'
            }
        }
    });

data1.jsondalam contoh ini (juga tersedia di biola ini ) berisi data Anda secara verbatim. idProperty: 'counter_name'mungkin opsional dalam kasus ini tetapi biasanya menunjuk pada atribut kunci utama. rootProperty: 'counters'menentukan properti mana yang berisi larik item data.

Dengan penyetelan toko dengan cara ini Anda dapat membaca ulang data dari server dengan menelepon store.load(). Anda juga dapat menghubungkan toko ke komponen UI yang sesuai Sencha Touch seperti kisi, daftar, atau formulir.



0

Ini bekerja seperti pesona!

Jadi saya mengedit kode sesuai kebutuhan saya. Dan berikut adalah perubahannya: Ini akan menyimpan nomor id dari respon ke variabel lingkungan.

var jsonData = JSON.parse(responseBody);
for (var i = 0; i < jsonData.data.length; i++)
{
    var counter = jsonData.data[i];
    postman.setEnvironmentVariable("schID", counter.id);
}

0

Jawaban dengan suara lebih tinggi memiliki kesalahan. ketika saya menggunakannya, saya menemukannya di baris 3:

var counter = jsonData.counters[i];

Saya mengubahnya menjadi:

var counter = jsonData[i].counters;

dan itu berhasil untuk saya. Ada perbedaan dengan jawaban lain di baris 3:

var jsonData = JSON.parse(myMessage);
for (var i = 0; i < jsonData.counters.length; i++) {
    var counter = jsonData[i].counters;
    console.log(counter.counter_name);
}

1
Mungkin maksud Anda bisa di mana Anda mengatakan harus . Namun lebih baik jika Anda menambahkan lebih banyak detail / penjelasan ke kode Anda, itu akan lebih membantu OP dan orang lain yang memiliki pertanyaan yang sama.
Tiw

Anda juga bisa menjelaskan sedikit mengapa Anda memilih metode ini sehingga pengguna belajar lebih banyak. Itu akan membantu meningkatkan jawaban ini.
TsTeaTime

jawaban dengan suara terbanyak menjawab pertanyaan ini tetapi ketika saya menggunakannya mengerti itu salah di baris 4: var counter = jsonData.counters [i]; Tapi saya mengubahnya menjadi: var counter = jsonData [i] .counters; dan itu berhasil. jadi saya katakan bisa daripada harus.
Mahdi Jalali


-1

Anda harus menggunakan datastore dan proxy di ExtJs. Ada banyak contohnya , dan pembaca JSON secara otomatis mengurai pesan JSON ke dalam model yang Anda tentukan.

Tidak perlu menggunakan Javascript dasar saat menggunakan ExtJs, semuanya berbeda, Anda harus menggunakan cara ExtJ untuk mendapatkan semuanya dengan benar. Baca dokumentasi disana dengan teliti, ada baiknya.

Ngomong-ngomong, contoh-contoh ini juga berlaku untuk Sencha Touch (terutama v2), yang didasarkan pada fungsi inti yang sama dengan ExtJ.


-1

Tidak yakin apakah data saya cocok persis tetapi saya memiliki array array objek JSON, yang diekspor dari jQuery FormBuilder saat menggunakan halaman.

Semoga jawaban saya dapat membantu siapa saja yang tersandung pada pertanyaan ini untuk mencari jawaban atas masalah yang serupa dengan yang saya alami.

Datanya terlihat seperti ini:

var allData = 
[
    [
        {
            "type":"text",
            "label":"Text Field"
        }, 
        {
            "type":"text",
            "label":"Text Field"
        }
    ],
    [
        {
            "type":"text",
            "label":"Text Field"
        }, 
        {
            "type":"text",
            "label":"Text Field"
        }
    ]
]

Apa yang saya lakukan untuk mengurai ini adalah dengan melakukan hal berikut:

JSON.parse("["+allData.toString()+"]")
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.