Jak stworzyć obiekt JSON za pomocą jQuery

80

Mam obiekt JSON w poniższym formacie:

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

Jak mogę utworzyć obiekt JSON w jQuery dla powyższego formatu. Chcę utworzyć dynamiczny obiekt JSON.

user1462958
źródło

Odpowiedzi:

213

Po prostu umieść swoje dane w obiekcie takim jak ten:

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

Następnie potwierdź go za pomocą:

var myString = JSON.stringify(myObject);

Nie potrzebujesz do tego jQuery. To czysty JS.

Tim
źródło
2
Czy możliwe jest dynamiczne tworzenie nazwy indeksu? na przykład: var nazwa = $ ('# moje imię'). val (); myObject.name = "jan" // tutaj indeks nazwy zostanie usunięty z pola wprowadzania.
Md. Sahadat Hossain,
3
Guz za powyższy komentarz: aby zastąpić dowolne wartości statyczne, takie jak .name .agelub .petspo prostu zastąpić je, w tym kropkę, zmienną zawartą w nawiasach kwadratowych. Przykład: myObject[cssProp] = cssVal;Wtedy jakiekolwiek wartości tych dwóch zmiennych css będą użyte w Object. Oto jsFiddle: http://fiddle.jshell.net/arttronics/rucjtbza/
arttronics
31

„Obiekt JSON” nie ma sensu: JSON to format wymiany oparty na strukturze deklaracji obiektu Javascript.

Jeśli chcesz przekonwertować obiekt javascript na łańcuch json, użyj JSON.stringify(yourObject);

Jeśli chcesz stworzyć obiekt javascript, po prostu zrób to w ten sposób:

var yourObject = {
          test:'test 1',
          testData: [ 
                {testName: 'do',testId:''}
          ],
          testRcd:'value'   
};
Denys Séguret
źródło
1
@guillaumealgis, czy możesz wyjaśnić powrót do mojej zmiany? Jeśli uruchamiasz obiekt przez JSONLint, jest on oznaczany jako nieprawidłowy (klawisze po lewej stronie muszą być umieszczone w cudzysłowie). Nie twierdzę, że się mylisz, chcę się dowiedzieć, dlaczego uważasz, że to prawidłowy JSON, ponieważ może to być coś, czego nie rozumiem. Jeśli uruchomisz moją wersję za pomocą tego samego walidatora, wróci ona jako prawidłowy JSON.
delliottg
1
@delliottg Nie używaj walidatora JSON do walidacji JavaScript. Przeczytaj ponownie początek mojej odpowiedzi.
Denys Séguret
2
@delliottg Nie mówię, że to poprawny JSON. Celem tej odpowiedzi jest rozróżnienie JSON od obiektu JS. Spróbuj uruchomić kod dystroy w interpreterze JS, a zobaczysz, że działa dobrze.
Guillaume Algis
3
Dzięki za komentarze, zdałem sobie sprawę, że po ponownym przeczytaniu tego i zadaniu własnego pytania na temat projektu, nad którym pracuję, miałem fundamentalne niezrozumienie, jak działają te rzeczy. Jestem prawie pewien, że teraz rozumiem i dziękuję za cierpliwość.
delliottg
5

Wydaje mi się, że prosi o zapisanie nowego pliku json w katalogu. Będziesz potrzebował JavaScript i PHP. Tak więc, aby odpuścić inne odpowiedzi:

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
?>
smulholland2
źródło
1

Jak uzyskać dołączoną wartość pola wejściowego w postaci json

temp:[
        {
           test:'test 1',
           testData:  [ 
                       {testName: 'do',testId:''}
                         ],
           testRcd:'value'                             
        },
        {
            test:'test 2',
           testData:  [
                            {testName: 'do1',testId:''}
                         ],
           testRcd:'value'                           
        }
      ],
engrmukul
źródło
0

Zagnieżdżony JSONobiekt

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

Możesz przeanalizować to data.view.typeidata.view.note

JSON Obiekt i wnętrze Array

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

Możesz przeanalizować to data.view[0].typeidata.view[0].note

Thamaraiselvam
źródło
-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) {

                        }
                    });
Ravi Anand
źródło
To miłe, ale pytanie nie dotyczy C # ani ASP
Machavity
@Machavity, gdzie znajdujesz w tym C #?
Ravi Anand
1
Ten komentarz dotyczył pierwszej wersji Twojej odpowiedzi, która zawierała C #. Teraz ma to jeszcze mniej sensu, ponieważ trwale kodujesz modelzmienną. To pytanie brzmi: „W JavaScript, jak mogę utworzyć obiekt w czasie wykonywania i przedstawić ten obiekt w notacji JSON” , na które Twoja odpowiedź nadal nie jest wyświetlana.
CodeCaster