web-dev-qa-db-ja.com

jqueryを使用して各入力値で動的にJSONを作成する

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: '[email protected]'}, {title: PROD, email: '[email protected]'},{title: DEV, email: '[email protected]'}]

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

この状況でどんな光が当てられても大歓迎です！

javascriptjqueryhtmljsonhtml5
75
BaconJuice

このような：

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を探しています。だから、あなたは空白の配列を作成します。 'title'と 'email'をキーとして使用して、各inputに対してオブジェクトを作成します。次に、各オブジェクトを配列に追加します。

文字列が必要な場合は、

jsonString = JSON.stringify(jsonObj);

サンプル出力

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

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);
11
ChrisF

これが助けになるかもしれませんが、可能な限り純粋な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);
}
8
Salman

次のコードでそれを達成することもできます。

 let str = '{" + yourKey + ":'+yourValue+'}';
 str = JSON.parse(str);
0
Geetanshu Gulati