Як створити об’єкт JSON за допомогою jQuery


80

У мене є об’єкт JSON у форматі нижче:

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

Як я можу створити об'єкт JSON у jquery для формату вище. Я хочу створити динамічний об'єкт JSON.

Відповіді:


213

Просто помістіть свої дані в такий об’єкт:

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

Потім розшифруйте його за допомогою:

var myString = JSON.stringify(myObject);

Для цього вам не потрібен jQuery. Це чистий JS.


2
Чи можливо створити ім'я індексу динамічно. наприклад: var name = $ ('# myname'). val (); myObject.name = "john" // тут індекс імені буде dinamaclly з поля вводу.
Md. Sahadat Hossain

3
Вирішення для вищезазначеного коментаря: Щоб замінити будь-яке статичне значення, наприклад, .name .ageабо .petsпросто замінити його, включаючи крапку, змінною, обгорнутою в квадратні дужки. Приклад: myObject[cssProp] = cssVal;Тоді, якими б не були значення цих двох змінних css, буде використано в Об'єкті. Ось jsFiddle: http://fiddle.jshell.net/arttronics/rucjtbza/
arttronics

31

"Об'єкт JSON" не має сенсу: JSON - це формат обміну, заснований на структурі оголошення об'єкта Javascript.

Якщо ви хочете перетворити свій об'єкт javascript на рядок json, використовуйте JSON.stringify(yourObject);

Якщо ви хочете створити об'єкт javascript, просто зробіть це так:

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

1
@guillaumealgis, ти можеш пояснити, як ти повернувся до мого редагування? Якщо ви запускаєте об'єкт через JSONLint, він буде позначений як недійсний (ліві клавіші повинні бути подвійними лапками). Я не сперечаюся, що ви помиляєтесь, я хочу дізнатися, чому ви вважаєте, що це дійсний JSON, тому що це може бути щось, що я не розумію. Якщо ви запускаєте мою версію через той самий валідатор, вона повертається як дійсний JSON.
delliottg

1
@delliottg Не використовуйте валідатор JSON для перевірки JavaScript. Будь ласка, прочитайте початок моєї відповіді ще раз.
Denys Séguret

2
@delliottg Я не кажу, що це дійсний JSON. Сенс цієї відповіді полягає у диференціації JSON-об'єкта JS. Спробуйте запустити код dystroy в інтерпретаторі JS, і ви побачите, що він працює чудово.
Гійом Альгіс

3
Дякую за коментарі, хлопці, я зрозумів, що мав фундаментальне нерозуміння того, як це працювало, перечитавши це ще раз, і задавши власне запитання про проект, над яким я працюю. Я майже впевнений, що зараз розумію, і дякую за ваше терпіння.
delliottg

5

Я вважаю, що він просить записати новий json в каталог. Вам знадобиться Javascript і PHP. Отже, щоб порося відступив від інших відповідей:

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

Як отримати додане значення поля введення як json

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

0

Вкладений JSONоб’єкт

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

Ви можете проаналізувати це data.view.typeіdata.view.note

JSON Об'єкт і всередині масиву

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

Ви можете проаналізувати це data.view[0].typeіdata.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) {

                        }
                    });

Це приємно, але питання не стосується C # чи ASP
Machavity

@Machavity, де ти знаходиш c # в цьому?
Раві Ананд

1
Цей коментар стосувався першого перегляду вашої відповіді, в якому був C #. Тепер це має ще менший сенс, оскільки ви жорстко кодуєте modelзмінну. Це запитання: "У JavaScript, як я можу створити об'єкт під час виконання та представити цей об'єкт у нотації JSON" , чого ваша відповідь досі не відображається.
CodeCaster
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.