HTML入力から複数の値を取り出し、JSONキー、値[配列]

Question

に保存してください！

私は現在Googleマップapiで作業しています。 Googleマップは、方向を設定するためのjson形式を要求します。

私は自分のjsonオブジェクトを作成するとすべてうまく動作しますが、入力フィールドからデータを取得してjsonオブジェクトに格納したいと考えています。

今私は入力フィールドから1つの値を取得して保存することができます。しかし、私は複数の値を取得するのが好きです。これはマップ上に方向を設定するために必要です。私は配列として複数の値をjsonオブジェクトに格納する方法を見つける必要があります。私はいくつかのものが間違って書いた場合、私は、私は専門家ではないよ:)

「キー」修正：「アレイ」

をこれは私がしようとするために必要なものである例+コード

については、以下を参照してください。 get： ユーザーがページに来て2つの入力フィールドを見ると、彼はアムステルダムとローマに入りますが、彼はいつもパリが必要です。ユーザーは+アイコンを押します。別の入力フィールドが表示され、彼はパリに入ります。ユーザーが送信したときに、これは以下の入力フィールド

"locatie" : ["Berlin", "Amsterdam", "Paris", "Rome"] 

からJSONの結果でなければならないこれは私のフォームです：

<form onsubmit="return make_json(this);"> 
    Locatie: <input type="text" name="locatie"> 
    <input type="submit" name="" value="Make Trip"> 
</form> 

私のJS機能：Googleマップで

function make_json(form) { 
    var json = { 

     "locatie" : form.locatie.value 

     // this is what works and what i would like to retrieve from multiple input fields 
     //"locatie" : ["Paris", "Amsterdam"] 
    }; 
    return json; 
    } 

私は関数を呼び出してjsonを使用します：

var jsonArray = make_json(); 

Answer 1

配列を宣言し、ボタンをクリックしたときに値をpushに宣言できます。

// Declare location array 
 
var locations = []; 
 

 
// Button bindings 
 
var locationButton = document.getElementById("addNewLocation"); 
 
locationButton.onclick = addNewLocation; 
 

 
var displayJsonButton = document.getElementById("displayJsonObject"); 
 
displayJsonButton.onclick = displayJsonObject; 
 

 
// Button functions 
 
function addNewLocation() { 
 
    var location = document.getElementById("locationText").value; 
 
    locations.push(location); 
 
    document.getElementById("locationText").value = ""; 
 
} 
 

 
function makeJsonObject() { 
 
    var json = { 
 
    location : locations 
 
    } 
 
    
 
    return json; 
 
} 
 

 
function displayJsonObject() { 
 
    var obj = makeJsonObject(); 
 
    console.log(obj.location); 
 
}

<input id="locationText" type="text" /> 
 
<button id="addNewLocation">Add</button> 
 
<button id="displayJsonObject">Display JSON</button>

結果をコンソールに移入されます。 displayJsonObject()関数でJSONオブジェクトを返しました。これをAPIに渡すことができます。

Answer 2

また、新しい場所を追加する前に入力した場所を表示し続ける場合は、これを試すこともできます。

function addInput() { 
 
    var input = document.createElement('input'); 
 
    input.setAttribute("type", "text"); 
 
    input.setAttribute("name", "locatie[]"); 
 
    inputs.appendChild(input); 
 
} 
 

 
function make_json() { 
 
    var form = document.querySelector("form"); 
 
    var values = []; 
 
    var locations = form['locatie[]']; 
 
    if (locations.length) { 
 
    locations.forEach(function(input) { 
 
     values.push(input.value); 
 
    }); 
 
    } else { 
 
    values.push(locations.value); 
 
    } 
 
    var json = { 
 
    "locatie": values 
 
    }; 
 
    console.log(json); 
 
    return json; 
 
}

<form> 
 
    Locatie: 
 
    <div id="inputs"> 
 
    <input type="text" name="locatie[]"> 
 
    </div> 
 
    <button onClick="addInput()">+</button> 
 
    <input type="submit" value="Make Trip" onClick="make_json(this)"> 
 
</form>

注： UIの世話をします。ユーザーがより多くの入力を入力すると、UIが変形することがあります。