web-dev-qa-db-ja.com

JavascriptでJSON配列を解析する方法

私はSencha Touch（ExtJS）を使ってサーバーからJSONメッセージを取得しています。私が受け取るメッセージはこれです：

{
"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"
    }

    ]
}

私の問題は、私がカウンターオブジェクトのそれぞれを使用できるように、このJSONオブジェクトを解析できないことです。

これを完成させようとしています：

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

何が悪いの？ありがとうございました！

javascriptjsonextjs
76
maephisto

Javascriptには、文字列に対するJSON解析が組み込まれています。

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

あなたの例でこれを使用するには：

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

これは実用的な例です

EDIT：forループの使い方に間違いがあります（最初の読んだときに見逃していました。その場で@Evertにクレジットします）。 for-inループを使用すると、varは実際のデータではなく現在のループのプロパティ名に設定されます。正しい使い方については上の私の更新されたループを見てください

IMPORTANT：JSON.parseメソッドは昔の古いブラウザでは動作しません - そのため、インターネット接続を曲げるような時間をかけてWebサイトを利用できるようにする場合これは問題になる可能性があります。あなたが本当に興味を持っているのであれば、 これはサポートチャートです （これはすべての私のボックスにチェックマークを付けます）。

123
musefan

For-in-loopでは、実行変数はプロパティ値ではなくプロパティ名を保持します。

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

しかし、countersはArrayなので、通常のforループを使用する必要があります。

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

これは私の答えです、

<!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>
5
Fisher Man

Ext.data.Store（この場合はExt.data.proxy.Proxy）によってプロキシされたExt.data.proxy.Ajax（この場合はExt.data.reader.Json）を設定することで（JSONエンコードされたデータ用に、他に利用可能なリーダーもあります）サーバーにデータを書き戻すために、いくつかの種類のExt.data.writer.Writerがあります。

これはそのような設定の例です：

    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.json（ this fiddle にもあります）には、データが逐語的に含まれています。この場合、idProperty: 'counter_name'はおそらくオプションですが、通常は主キー属性を指します。 rootProperty: 'counters'は、どのプロパティがデータ項目の配列を含むかを指定します。

このようにストアを設定すると、store.load()を呼び出してサーバーからデータを再読み込みできます。また、グリッド、リスト、フォームなど、Sencha Touchの適切なUIコンポーネントにストアを接続することもできます。

1
rzen

私にとってはもう少し何か..

var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';  
var contact = JSON.parse(jsontext);  
document.write(contact.surname + ", " + contact.firstname);  
document.write(contact.phone[1]);  
// Output:  
// Aaberg, Jesper  
// 555-0100

参照： https://docs.Microsoft.com/ja-jp/scripting/javascript/reference/json-parse-function-javascript

0
hB0

これは魅力のように機能します！

だから私は自分の要求通りにコードを編集しました。変更点は次のとおりです。レスポンスからのID番号を環境変数に保存します。

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
Sobhit Sharma