So erstellen Sie ein JSON-Objekt mit jQuery

79

Ich habe ein JSON-Objekt im folgenden Format:

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

Wie kann ich ein JSON-Objekt in jquery für das obige Format erstellen? Ich möchte ein dynamisches JSON-Objekt erstellen.

user1462958
quelle

Antworten:

211

Fügen Sie einfach Ihre Daten in ein Objekt wie folgt ein:

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

Anschließend stringifizieren Sie es über:

var myString = JSON.stringify(myObject);

Dafür benötigen Sie jQuery nicht. Es ist reine JS.

Tim
quelle
2
Ist es möglich, den Indexnamen dynamisch zu erstellen? zum Beispiel: var name = $ ('# myname'). val (); myObject.name = "john" // hier wird der Namensindex dinamaclly aus einem Eingabefeld.
Md. Sahadat Hossain
3
Eine Beule für den obigen Kommentar: Ersetzen Sie einen der statischen Werte wie .name .ageoder .petsersetzen Sie diesen, einschließlich des Punkts, durch eine Variable in eckigen Klammern. Beispiel: myObject[cssProp] = cssVal;Dann werden im Objekt alle Werte dieser beiden CSS-Variablen verwendet. Hier ist eine jsFiddle: http://fiddle.jshell.net/arttronics/rucjtbza/
arttronics
31

Ein "JSON-Objekt" macht keinen Sinn: JSON ist ein Austauschformat, das auf der Struktur der Javascript-Objektdeklaration basiert.

Wenn Sie Ihr Javascript-Objekt in eine JSON-Zeichenfolge konvertieren möchten, verwenden Sie JSON.stringify(yourObject);

Wenn Sie ein Javascript-Objekt erstellen möchten, gehen Sie einfach folgendermaßen vor:

var yourObject = {
          test:'test 1',
          testData: [ 
                {testName: 'do',testId:''}
          ],
          testRcd:'value'   
};
Denys Séguret
quelle
1
@guillaumealgis, kannst du mir meinen Rollback zu meiner Bearbeitung erklären? Wenn Sie das Objekt über JSONLint ausführen, wird es als ungültig markiert (die Tasten auf der linken Seite müssen in doppelte Anführungszeichen gesetzt werden). Ich behaupte nicht, dass Sie falsch liegen, ich möchte erfahren, warum Sie glauben, dass es sich um gültiges JSON handelt, weil es möglicherweise etwas ist, das ich nicht verstehe. Wenn Sie meine Version über denselben Validator ausführen, wird sie als gültiger JSON zurückgegeben.
Delliottg
1
@delliottg Verwenden Sie keinen JSON-Validator, um JavaScript zu validieren. Bitte lesen Sie den Anfang meiner Antwort noch einmal.
Denys Séguret
2
@delliottg Ich sage nicht, dass es ein gültiger JSON ist. Der Sinn dieser Antwort besteht darin, JSON von einem JS-Objekt zu unterscheiden. Wenn Sie versuchen, Dystroy-Code in einem JS-Interpreter auszuführen, werden Sie feststellen, dass er einwandfrei funktioniert.
Guillaume Algis
3
Vielen Dank für die Kommentare, ich habe festgestellt, dass ich ein grundlegendes Missverständnis darüber hatte, wie dieses Zeug funktioniert, nachdem ich es noch einmal durchgelesen und meine eigene Frage zu einem Projekt gestellt habe, an dem ich arbeite. Ich bin mir ziemlich sicher, dass ich es jetzt verstehe, und danke für Ihre Geduld.
delliottg
5

Ich glaube, er bittet darum, den neuen JSON in ein Verzeichnis zu schreiben. Sie benötigen etwas Javascript und PHP. Also, um die anderen Antworten zurückzudrängen:

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
quelle
1

So erhalten Sie einen angehängten Eingabefeldwert wie json like

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

Verschachteltes JSONObjekt

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

Sie können dies data.view.typeund analysierendata.view.note

JSON Objekt und innerhalb des Arrays

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

Sie können dies data.view[0].typeund analysierendata.view[0].note

Thamaraiselvam
quelle
-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
quelle
Das ist schön, aber die Frage betrifft weder C # noch ASP
Machavity
@Machavity, wo findest du c # darin?
Ravi Anand
1
In diesem Kommentar ging es um die erste Überarbeitung Ihrer Antwort, in der C # enthalten war. Jetzt macht es noch weniger Sinn, da Sie die modelVariable fest codieren . Diese Frage lautet: "Wie kann ich in JavaScript ein Objekt zur Laufzeit erstellen und dieses Objekt in JSON-Notation darstellen?" , Was Ihre Antwort immer noch nicht anzeigt.
CodeCaster