Cách tạo đối tượng JSON bằng jQuery


80

Tôi có một đối tượng JSON ở định dạng dưới đây:

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

Làm cách nào để tạo đối tượng JSON trong jquery cho định dạng trên. Tôi muốn tạo một đối tượng JSON động.

Câu trả lời:


213

Chỉ cần đặt dữ liệu của bạn vào một Đối tượng như sau:

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

Sau đó xâu chuỗi nó qua:

var myString = JSON.stringify(myObject);

Bạn không cần jQuery cho việc này. Đó là JS thuần túy.


2
Có thể tạo tên chỉ mục một cách linh hoạt không. ví dụ: var name = $ ('# myname'). val (); myObject.name = "john" // ở đây chỉ mục tên sẽ là dấu chấm từ một hộp nhập liệu.
Md. Sahadat Hossain

3
Một điểm nhấn cho nhận xét trên: Để thay thế bất kỳ giá trị tĩnh nào, chẳng hạn như .name .agehoặc .petschỉ thay thế giá trị đó, bao gồm cả dấu chấm, bằng một biến được bao bọc trong dấu ngoặc vuông. Ví dụ: myObject[cssProp] = cssVal;Sau đó bất kỳ giá trị nào của hai biến css đó sẽ được sử dụng trong Đối tượng. Đây là jsFiddle: http://fiddle.jshell.net/arttronics/rucjtbza/
arttronics

31

"Đối tượng JSON" không có ý nghĩa: JSON là một định dạng trao đổi dựa trên cấu trúc của khai báo đối tượng Javascript.

Nếu bạn muốn chuyển đổi đối tượng javascript của mình thành một chuỗi json, hãy sử dụng JSON.stringify(yourObject);

Nếu bạn muốn tạo một đối tượng javascript, chỉ cần thực hiện như sau:

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

1
@guillaumealgis, bạn có thể giải thích cuộn của bạn trở lại chỉnh sửa của tôi không? Nếu bạn chạy đối tượng thông qua JSONLint, đối tượng đó được gắn cờ là không hợp lệ (các phím bên trái cần được trích dẫn kép). Tôi không tranh luận rằng bạn sai, tôi muốn tìm hiểu lý do tại sao bạn tin rằng đó là JSON hợp lệ vì nó có thể là điều gì đó tôi không hiểu. Nếu bạn chạy phiên bản của tôi thông qua cùng một trình xác thực, nó sẽ trở lại dưới dạng JSON hợp lệ.
delliottg

1
@delliottg Không sử dụng trình xác thực JSON để xác thực JavaScript. Vui lòng đọc lại phần bắt đầu câu trả lời của tôi.
Denys Séguret

2
@delliottg Tôi không nói rằng đó là một JSON hợp lệ. Điểm của câu trả lời này là để phân biệt JSON với một đối tượng JS. Hãy thử chạy mã dystroy trong trình thông dịch JS và bạn sẽ thấy rằng nó chạy tốt.
Guillaume Algis

3
Cảm ơn những lời nhận xét của các bạn, tôi nhận ra rằng mình đã hiểu sai cơ bản về cách hoạt động của công cụ này sau khi đọc lại điều này và tự đặt câu hỏi về dự án mà tôi đang thực hiện. Tôi khá chắc rằng bây giờ tôi đã hiểu và cảm ơn sự kiên nhẫn của bạn.
delliottg

5

Tôi tin rằng anh ấy đang yêu cầu ghi json mới vào một thư mục. Bạn sẽ cần một số Javascript PHP. Vì vậy, để loại bỏ các câu trả lời khác:

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ách nhận giá trị trường đầu vào nối thêm như json

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

0

JSONĐối tượng lồng nhau

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

Bạn có thể phân tích cú pháp này data.view.typedata.view.note

JSON Đối tượng và bên trong Mảng

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

Bạn có thể phân tích cú pháp này data.view[0].typedata.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) {

                        }
                    });

Điều đó thật tuyệt nhưng câu hỏi không liên quan đến C # hoặc ASP
Machavity

@Machavity, bạn tìm thấy c # ở đâu trong này?
Ravi Anand

1
Nhận xét đó là về bản sửa đổi đầu tiên của câu trả lời của bạn, có C # trong đó. Bây giờ nó thậm chí còn ít ý nghĩa hơn, vì bạn đang mã hóa modelbiến. Câu hỏi này là: "Trong JavaScript, làm cách nào tôi có thể tạo một đối tượng trong thời gian chạy và biểu diễn đối tượng đó trong ký hiệu JSON" , câu trả lời của bạn vẫn không hiển thị.
CodeCaster
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.