Cómo crear un objeto JSON usando jQuery


80

Tengo un objeto JSON en el siguiente formato:

temp:[
        {
           test:'test 1',
           testData:  [ 
                       {testName: 'do',testId:''}
                         ],
           testRcd:'value'                             
        },
        {
            test:'test 2',
           testData:  [
                            {testName: 'do1',testId:''}
                         ],
           testRcd:'value'                           
        }
      ],

¿Cómo puedo crear un objeto JSON en jquery para el formato anterior? Quiero crear un objeto JSON dinámico.

Respuestas:


213

Simplemente coloque sus datos en un objeto como este:

var myObject = new Object();
myObject.name = "John";
myObject.age = 12;
myObject.pets = ["cat", "dog"];

Luego, encadenarlo a través de:

var myString = JSON.stringify(myObject);

No necesitas jQuery para esto. Es JS puro.


2
¿Es posible crear un nombre de índice de forma dinámica? por ejemplo: var name = $ ('# myname'). val (); myObject.name = "john" // aquí el índice del nombre será dinámicamente de un cuadro de entrada.
Md. Sahadat Hossain

3
Un salto para el comentario anterior: para reemplazar cualquiera de los valores estáticos, como .name .ageo .petssimplemente reemplazarlo, incluido el punto, con una variable entre corchetes. Ejemplo: myObject[cssProp] = cssVal;Entonces, cualesquiera que sean los valores de esas dos variables css, se usarán en el objeto. Aquí hay un jsFiddle: http://fiddle.jshell.net/arttronics/rucjtbza/
arttronics

31

Un "objeto JSON" no tiene sentido: JSON es un formato de intercambio basado en la estructura de la declaración del objeto Javascript.

Si desea convertir su objeto javascript en una cadena json, use JSON.stringify(yourObject);

Si desea crear un objeto javascript, simplemente hágalo así:

var yourObject = {
          test:'test 1',
          testData: [ 
                {testName: 'do',testId:''}
          ],
          testRcd:'value'   
};

1
@guillaumealgis, ¿puede explicar su regreso a mi edición? Si ejecuta el objeto a través de JSONLint, se marca como no válido (las teclas de la izquierda deben estar entre comillas dobles). No estoy argumentando que esté equivocado, quiero saber por qué cree que es JSON válido porque puede ser algo que no entiendo. Si ejecuta mi versión a través del mismo validador, vuelve como JSON válido.
delliottg

1
@delliottg No utilice un validador JSON para validar JavaScript. Vuelva a leer el comienzo de mi respuesta.
Denys Séguret

2
@delliottg No estoy diciendo que sea un JSON válido. El objetivo de esta respuesta es diferenciar JSON de un objeto JS. Intente ejecutar el código de distrofia en un intérprete de JS y verá que funciona bien.
Guillaume Algis

3
Gracias por los comentarios, chicos, me di cuenta de que tenía un malentendido fundamental de cómo funcionaban estas cosas después de leer esto nuevamente y hacer mi propia pregunta sobre un proyecto en el que estoy trabajando. Estoy bastante seguro de que lo entiendo ahora, y gracias por su paciencia.
delliottg

5

Creo que está pidiendo escribir el nuevo json en un directorio. Necesitará algo de Javascript y PHP. Entonces, para aprovechar las otras respuestas:

script.js

var yourObject = {
  test:'test 1',
  testData: [ 
    {testName: 'do',testId:''}
   ],
   testRcd:'value'   
};
var myString = 'newData='+JSON.stringify(yourObject);  //converts json to string and prepends the POST variable name
$.ajax({
   type: "POST",
   url: "buildJson.php", //the name and location of your php file
   data: myString,      //add the converted json string to a document.
   success: function() {alert('sucess');} //just to make sure it got to this point.
});
return false;  //prevents the page from reloading. this helps if you want to bind this whole process to a click event.

buildJson.php

<?php
    $file = "data.json";  //name and location of json file. if the file doesn't exist, it   will be created with this name

    $fh = fopen($file, 'a');  //'a' will append the data to the end of the file. there are other arguemnts for fopen that might help you a little more. google 'fopen php'.

    $new_data = $_POST["newData"]; //put POST data from ajax request in a variable

    fwrite($fh, $new_data);  //write the data with fwrite

    fclose($fh);  //close the dile
?>

1

Cómo agregar el valor del campo de entrada como json like

temp:[
        {
           test:'test 1',
           testData:  [ 
                       {testName: 'do',testId:''}
                         ],
           testRcd:'value'                             
        },
        {
            test:'test 2',
           testData:  [
                            {testName: 'do1',testId:''}
                         ],
           testRcd:'value'                           
        }
      ],

0

JSONObjeto anidado

var data = {
        view:{
            type: 'success', note:'Updated successfully',
        },
    };

Puede analizar esto data.view.typeydata.view.note

JSON Objeto y matriz interior

var data = {
          view: [ 
                {type: 'success', note:'updated successfully'}
          ],  
     };

Puede analizar esto data.view[0].typeydata.view[0].note


-1
var model = {"Id": "xx", "Name":"Ravi"};
$.ajax({    url: 'test/set',
                        type: "POST",
                        data: model,
                        success: function (res) {
                            if (res != null) {
                                alert("done.");
                            }
                        },
                        error: function (res) {

                        }
                    });

Eso es bueno, pero la pregunta no involucra C # o ASP
Machavity

@Machavity, ¿dónde encuentras c # en esto?
Ravi Anand

1
Ese comentario fue sobre la primera revisión de su respuesta, que tenía C # en él. Ahora tiene aún menos sentido, ya que está codificando la modelvariable. Esta pregunta es: "En JavaScript, ¿cómo puedo crear un objeto en tiempo de ejecución y representar ese objeto en notación JSON" , que su respuesta aún no muestra.
CodeCaster
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.