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'}]

電子メールが入力フィールド値によって取得される場所。

回答:


273

このような:

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「title」と「email」をキーとして使用して、それぞれのオブジェクトを作成します。次に、各オブジェクトを配列に追加します。

文字列が必要な場合は、

jsonString = JSON.stringify(jsonObj);

サンプル出力

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

これらの3つの例で、なぜ私はいつもこれを取得するのですか?'Uncaught ReferenceError:jsonObj is not defined'
Gino

@Ginoコピー&ペーストまたは入力しましたか?jsonObjを定義する行を参照してください。
ATOzTOA 2015年

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);
}

Big + 1はこのソリューションを採用し、受け入れられた回答によりIEでいくつかの問題が発生しました
Bobadevv 2016

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.