2012-04-03 27 views
56

Estoy usando Sencha Touch (ExtJS) para obtener un mensaje JSON del servidor. El mensaje que recibo es éste:Javascript cómo analizar matrices 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" 
    } 

    ] 
} 

Mi problema es que no puedo analizar este objeto JSON para que pueda utilizar cada uno de los objetos de contador.

estoy tratando de acomplish que de esta manera:

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

¿Qué estoy haciendo mal? ¡Gracias!

+1

Posible duplicado de [Con seguridad convirtiendo una cadena JSON en un objeto] (https://stackoverflow.com/questions/45015/safely-turning-a-json-string-into-an-object) –

Respuesta

88

Javascript construido en JSON de análisis sintáctico para cuerdas, que creo que es lo que tienes:

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

utilizar esto con su ejemplo podría ser:

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: Hay un error en el uso de for loop (me lo perdí en mi primera lectura, crédito a @Evert por el lugar). el uso de un bucle for-in configurará var para que sea el nombre de la propiedad del bucle actual, no los datos reales. Véase mi bucle de actualización anterior para el uso correcto

IMPORTANTE: el método JSON.parse no trabajará en los viejos navegadores antiguos - lo que si va a hacer su sitio web disponible a través de algún tipo de tiempo de flexión conexión a Internet, esto podría ser un problema! Si realmente está interesado, here is a support chart (que cumple todos mis requisitos).

+1

Si usa una biblioteca que admite una función parseJSON entre navegadores, debería usar eso. Además, repites el error de bucle. – Bergi

+0

gracias @musefan. Funcionó como un encanto – maephisto

+0

Aparece un error en la primera línea cuando ejecuto esto: Uncaught SyntaxError: Token inesperado o – nights

4

En un for-in-loop, la variable en ejecución contiene el nombre de la propiedad, no el valor de la propiedad.

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

Pero como contadores es una matriz, usted tiene que utilizar una normal de bucle:

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

se debe utilizar un almacén de datos y proxy en ExtJs. Hay un montón de examples de esto, y el lector JSON analiza automáticamente el mensaje JSON en el modelo que ha especificado.

No es necesario utilizar Javascript básico cuando se utilizan ExtJs, todo es diferente, debe usar las formas ExtJs de hacerlo bien. Lea atentamente la documentación, está bien.

Por cierto, estos ejemplos también se aplican a Sencha Touch (especialmente v2), que se basa en las mismas funciones básicas que ExtJs.

2

Esta es mi respuesta,

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

Referencia W3 Escuelas para el ejemplo anterior. http://www.w3schools.com/json/json_syntax.asp –

1

"camino Sencha" para interactuar con los datos del servidor es la creación de un Ext.data.Store aproximada por una Ext.data.proxy.Proxy (en este caso Ext.data.proxy.Ajax) amueblada con una Ext.data.reader.Json (para los datos codificados en JSON, existen otros lectores disponibles también). Para escribir datos en el servidor hay un Ext.data.writer.Writer s de varios tipos.

He aquí un ejemplo de una configuración como que:

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 en este ejemplo (también disponible en this fiddle) contiene sus datos palabra por palabra. idProperty: 'counter_name' es probablemente opcional en este caso, pero generalmente apunta a un atributo de clave principal. rootProperty: 'counters' especifica qué propiedad contiene una matriz de elementos de datos.

Con una configuración de tienda de esta manera puede volver a leer los datos del servidor llamando al store.load(). También puede conectar la tienda a los componentes de interfaz de usuario apropiados de Sencha Touch, como cuadrículas, listas o formularios.

Cuestiones relacionadas