2012-06-30 18 views
5

Estoy intentando recorrer varios elementos y crear un objeto json. Cada ciclo debe ser un nuevo elemento en el objeto, pero estoy teniendo problemas para hacerlo. Parece que solo se agrega un conjunto de elementos, en lugar de varios.¿Cómo construir un objeto json con un bucle?

Aquí está mi código:

jsonObj = {} 
rows.each(function (index) { 
    jsonObj["id"] = $this.find('.elementOne').val(); 
    jsonObj["name"] = $this.find('.elementTwo').text(); 

}); 

Esto es lo que se ve mi JSON como:

{ 
    id: "3" 
    name: "Stuff" 
}, 

Aquí es lo que estoy tratando de hacer:

{ 
    id: "1" 
    name: "Stuff" 
}, 
{ 
    id: "2" 
    name: "Stuff" 
}, 
{ 
    id: "3" 
    name: "Stuff" 
} 
+4

Técnicamente no es no existe un "objeto JSON" - JSON es una cadena _ que representa un _JavaScript Object_. Lo que está tratando aquí es un _JavaScript Object_, no JSON. –

+0

JSON es una cadena que representa una estructura de datos que se puede analizar con muchos lenguajes de programación. Se basa en un subconjunto de JavaScript, pero los tipos de datos que admite aparecen en muchos idiomas. – Quentin

Respuesta

25

No hay JSON aquí. Por favor, no confunda:

  • objeto A JavaScript (una estructura de datos)
  • Un objeto literal JavaScript (código para crear una estructura de datos)
  • JSON (un formato de datos basado en un subconjunto de objetos notación literal)

Si desea una lista ordenada de objetos (o cualquier otro tipo de estructura de datos de JavaScript), utilice una matriz. Las matrices tienen un método push.

var myData = []; 
rows.each(function (index) { 
    var obj = { 
     id: $this.find('.elementOne').val(), 
     name: $this.find('.elementTwo').text() 
    }; 
    myData.push(obj); 
}); 
1
var jsonObj = []; 
rows.each(function(index) { 
    jsonObj.push({ 
     id: $this.find('.elementOne').val(), 
     name: $this.find('.elementTwo').text() 
    }); 
}); 
4

Sobreescribes el objeto en lugar de agregarle un nuevo valor cada ite racionar.

Código fijo utilizando una matriz:

jsonObj = []; 
rows.each(function(index) { 
    jsonObj.push({ 
     'id': $this.find('.elementOne').val(), 
     'name': $this.find('.elementTwo').text() 
    }); 
});​ 
2

Esto es porque estás simplemente sobrescribir las mismas propiedades de su objeto, y idname, cada vez. Necesitarás hacer un subobjeto para cada uno, luego insertarlo en el objeto maestro (que he convertido en matriz, ya que no es asociativo).

var jsonObj = [] 
rows.each(function (index) { 
    var temp_obj = {}; 
    temp_obj["id"] = $this.find('.elementOne').val(); 
    temp_obj["name"] = $this.find('.elementTwo').text(); 
    jsonObj.push(temp_obj); 
}); 

[EDIT] - como muestra la respuesta de Mark Eirich, la temp_obj es necesario - se puede empujar un objeto anónimo en su lugar, pero definido temp_obj sólo para dejar muy claro lo que está pasando.

Lea también los muy buenos puntos de Quentin sobre la confusión común entre objetos JavaScript y JSON.

4

Lo que quiere es una matriz de objetos. Cuando intenta escribir la misma propiedad en el mismo objeto varias veces, se sobrescribe y es por eso que está viendo que id y name contienen valores para la última iteración del ciclo.

Aunque usted no ha marcado la pregunta con jQuery, que tiene un aspecto como jQuery, así que aquí tiene una solución:

Me he tomado la libertad de cambiar $this a this porque $this parece estar refiriéndose a la misma objeto en cada iteración, que es ahora lo que puede querer (creo)

var myArray = rows.map(function() { 
    return { 
     id: $(this).find('.elementOne').val(), 
     name: $(this).find('.elementTwo').text() 
    }; 
}); 
+0

La mejor respuesta aquí. Nice N clean! +1. – gdoron

1

Puede hacerlo así con jquery. La función esperará elementos de formulario de tipo entrada. Será iterar a la forma aprobada recogerá cada nombre de entrada y el valor y se creará un objeto JSON como

exmple:

HTML

<form action="" method="post" id="myForm"> 
    <input type="text" name="field1" value="I a value of field 1"/> 
    <input type="text" name="field2" value="I a value of field 2"/> 
</form> 

Javascript

function buildObject(form) { 
      var jsonObject = [], 
       tempObj = {}; 
      $(form).find("input:not(input[type='submit'])").each(function() { 
       tempObj[$(this).attr("name")] = $(this).val(); 
      }); 

      jsonObject.push(tempObj); 

      return jsonObject[0]; 
    } 
    buildObject($("#myForm")); 
    //Will produce 

    jsonObj = { 
     field1 : "I a value of field 1", 
     field2 : "I am value of field 2"  
    } 
Cuestiones relacionadas