jQuery를 사용하여 JSON 객체를 만드는 방법


80

아래 형식의 JSON 개체가 있습니다.

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

위의 형식에 대해 jquery에서 JSON 객체를 어떻게 만들 수 있습니까? 동적 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"// 여기서 이름 인덱스는 입력 상자에서 동적으로 나타납니다.
Md. Sahadat Hossain 2014 년

3
위 주석에 대한 범프 : 점을 포함한 정적 값을 대괄호로 둘러싼 변수로 바꾸 .name .age거나 .pets그냥 바꾸려면. 예 : myObject[cssProp] = cssVal;그런 다음 두 CSS 변수의 값이 무엇이든 Object에서 사용됩니다. 다음은 jsFiddle입니다. http://fiddle.jshell.net/arttronics/rucjtbza/
arttronics

31

"JSON 객체"는 의미가 없습니다. JSON 은 Javascript 객체 선언 구조를 기반으로하는 교환 형식입니다.

자바 스크립트 객체를 json 문자열로 변환하려면 JSON.stringify(yourObject);

자바 스크립트 객체를 생성하려면 다음과 같이하면됩니다.

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

1
@guillaumealgis, 내 편집에 대한 롤백을 설명해 주시겠습니까? JSONLint를 통해 개체를 실행하면 유효하지 않은 것으로 표시됩니다 (왼쪽 키는 큰 따옴표로 묶어야 함). 나는 당신이 틀렸다고 주장하는 것이 아니라 내가 이해하지 못하는 것일 수 있기 때문에 그것이 유효한 JSON이라고 믿는 이유를 배우고 싶습니다. 동일한 유효성 검사기를 통해 내 버전을 실행하면 유효한 JSON으로 돌아옵니다.
delliottg 2014 년

1
@delliottg JavaScript의 유효성을 검사하기 위해 JSON 유효성 검사기를 사용하지 마십시오. 내 대답의 시작 부분을 다시 읽으십시오.
Denys Séguret 2014 년

2
@delliottg 유효한 JSON이라고 말하는 것이 아닙니다. 이 답변의 요점은 JSON과 JS 객체를 구별하는 것입니다. JS 인터프리터에서 dystroy 코드를 실행하면 제대로 실행되는 것을 볼 수 있습니다.
Guillaume Algis 2014 년

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 #을 찾을 수 있습니까?
Ravi Anand

1
이 의견은 C #이 포함 된 답변의 첫 번째 수정 버전에 대한 것입니다. 이제는 model변수를 하드 코딩하므로 훨씬 덜 의미가 있습니다 . 이 질문은 "JavaScript에서 런타임에 객체를 생성하고 JSON 표기법으로 해당 객체를 표현하는 방법" 입니다. 답변은 여전히 ​​표시되지 않습니다.
CodeCaster
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.