2012-04-03 28 views
56

Sto usando Sencha Touch (ExtJS) per ottenere un messaggio JSON dal server. Il messaggio che ricevo è questa:Javascript come analizzare array 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" 
    } 

    ] 
} 

Il mio problema è che non posso analizzare questo oggetto JSON in modo che posso usare ciascuno degli oggetti contatore.

sto cercando di compire che in questo modo:

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

Che cosa sto facendo di sbagliato? Grazie!

+1

Possibile duplicato di [Rotazione sicura di una stringa JSON in un oggetto] (https://stackoverflow.com/questions/45015/safely-turning-a-json-string-into-an-object) –

risposta

88

JavaScript è dotato di un JSON parsing per archi, che credo sia quello che hai:

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

utilizzare questo con il tuo esempio potrebbe essere:

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

Here is a working example

EDIT: C'è un errore nell'uso del ciclo for (mi sono perso questo messaggio durante la mia prima lettura, credito a @Evert per lo spot). l'utilizzo di un ciclo for-in imposta la var come il nome della proprietà del loop corrente, non i dati effettivi. Vedere il mio ciclo aggiornato sopra per un corretto utilizzo

IMPORTANTE: il metodo JSON.parse non funzionerà nei vecchi vecchi browser - quindi se avete intenzione di rendere il vostro sito web a disposizione attraverso una sorta di tempo di piegatura connessione a Internet, questo potrebbe essere un problema! Se sei davvero interessato, here is a support chart (che spunta tutte le mie caselle).

+1

Se usa un libreria che supporta una funzione parseJSON cross-browser, dovrebbe usarlo. Inoltre, ripeti l'errore del ciclo. – Bergi

+0

grazie a @musefan. Ho funzionato come un fascino – maephisto

+0

Viene visualizzato un errore sulla prima riga quando eseguo questo: Uncaught SintassiErrore: token imprevisto o – nights

4

In un ciclo for-in-loop la variabile corrente contiene il nome della proprietà, non il valore della proprietà.

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

Ma come contatori è un array, è necessario utilizzare un normale ciclo for:

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

È necessario utilizzare un archivio dati e proxy ExtJs. Ci sono un sacco di examples di questo, e il lettore JSON analizza automaticamente il messaggio JSON nel modello che hai specificato.

Non è necessario utilizzare Javascript di base quando si utilizzano ExtJs, è tutto diverso, è necessario utilizzare i modi ExtJs per ottenere tutto correttamente. Leggi la documentazione attentamente, va bene.

A proposito, questi esempi valgono anche per Sencha Touch (in particolare v2), che si basa sulle stesse funzioni di base di ExtJs.

2

Questa è la mia risposta,

<!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> 
+2

Riferimento W3 Scuole per l'esempio sopra. http://www.w3schools.com/json/json_syntax.asp –

1

"via Sencha" per l'interazione con i dati del server è la creazione di un Ext.data.Store approssimata da una Ext.data.proxy.Proxy (in questo caso Ext.data.proxy.Ajax) attrezzata con un Ext.data.reader.Json (per i dati JSON-codificati, esistono altri lettori disponibili anche). Per la scrittura dei dati sul server sono disponibili Ext.data.writer.Writer s di diversi tipi.

Ecco un esempio di una configurazione del genere:

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 in questo esempio (disponibile anche in this fiddle) contiene i dati di Verbatim. idProperty: 'counter_name' è probabilmente opzionale in questo caso, ma solitamente punta all'attributo chiave primaria. rootProperty: 'counters' specifica quale proprietà contiene una matrice di elementi di dati.

Con una configurazione del negozio in questo modo è possibile rileggere i dati dal server chiamando store.load(). Puoi anche collegare il negozio a qualsiasi componente dell'interfaccia utente appropriato di Sencha Touch come griglie, elenchi o moduli.