jquery를 사용하여 각 입력 값으로 동적으로 JSON 만들기


91

PHP를 통해 JSON 형식에서 일부 데이터를 읽고 싶은 상황이 있지만 JSON 형식을 동적으로 생성하기 위해 Javascript 개체를 구성하는 방법을 이해하는 데 몇 가지 문제가 있습니다.

내 시나리오는 다음과 같습니다.

<input title="QA" type="text" class="email">
<input title="PROD" type="text" class="email">
<input title="DEV" type="text" class="email">

지금까지 내가 가지고있는 Javascript 코드는 각 입력을 통해 데이터를 가져 오지만 여기서부터 처리하는 방법을 이해할 수 없습니다.

var taskArray = {};

$("input[class=email]").each(function() {
  var id = $(this).attr("title");
  var email = $(this).val();

  //how to create JSON?

});

가능한 경우 다음 출력을 얻고 싶습니다.

[{title: QA, email: 'a@a.com'}, {title: PROD, email: 'b@b.com'},{title: DEV, email: 'c@c.com'}]

입력 필드 값으로 이메일을 획득 한 위치입니다.

답변:


274

이렇게 :

function createJSON() {
    jsonObj = [];
    $("input[class=email]").each(function() {

        var id = $(this).attr("title");
        var email = $(this).val();

        item = {}
        item ["title"] = id;
        item ["email"] = email;

        jsonObj.push(item);
    });

    console.log(jsonObj);
}

설명

을 찾고 있습니다 an array of objects. 따라서 빈 배열을 만듭니다. input'제목'과 '이메일'을 키로 사용하여 각각 에 대한 개체를 만듭니다 . 그런 다음 각 개체를 배열에 추가합니다.

문자열이 필요하면 다음을 수행하십시오.

jsonString = JSON.stringify(jsonObj);

샘플 출력

[{"title":"QA","email":"a@b"},{"title":"PROD","email":"b@c"},{"title":"DEV","email":"c@d"}] 

이 세 가지 예에서 왜 항상 이것을 얻습니까? 'catch되지 않은 오류 ReferenceError : jsonObj은 정의되지 않은'
지노

@Gino 붙여 넣거나 입력 했습니까? jsonObj를 정의하는 행을 참조하십시오.
ATOzTOA

15

JSON 문자열이 출력으로 필요하다고 가정하면 jQuery 만 사용하여 JavaScript 개체를 JSON 문자열로 변환 할 수 없다고 생각합니다.

대상 브라우저에 따라 JSON.stringify함수를 사용하여 JSON 문자열을 생성 할 수 있습니다 .

자세한 내용은 http://www.json.org/js.html 을 참조 하십시오 . JSON 개체를 기본적으로 지원하지 않는 이전 브라우저 용 JSON 파서를 찾을 수도 있습니다.

귀하의 경우 :

var array = [];
$("input[class=email]").each(function() {
    array.push({
        title: $(this).attr("title"),
        email: $(this).val()
    });
});
// then to get the JSON string
var jsonString = JSON.stringify(array);

10

이것이 도움이 될 수 있습니다. 가능한 한 순수 JS를 선호합니다. JQuery 함수 호출이 많지 않으므로 성능이 크게 향상됩니다.

var obj = [];
var elems = $("input[class=email]");

for (i = 0; i < elems.length; i += 1) {
    var id = this.getAttribute('title');
    var email = this.value;
    tmp = {
        'title': id,
        'email': email
    };

    obj.push(tmp);
}

큰 + 1은 허용 대답은 IE 나에게 몇 가지 문제의 원인이 솔루션으로 갔다
Bobadevv

0

위의 예와 동일-json (객체 배열이 아님)을 찾고 있다면 그냥 사용하십시오.

function getJsonDetails() {
      item = {}
      item ["token1"] = token1val;
      item ["token2"] = token1val;
      return item;
}
console.log(JSON.stringify(getJsonDetails()))

이 출력은 (유효한 json)으로 인쇄됩니다.

{ 
   "token1":"samplevalue1",
   "token2":"samplevalue2"
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.