從HTML輸入中檢索多個值並存儲在JSON鍵中，值[Array]

我目前正在使用google maps api。谷歌地圖要求提供json格式來設置路線。

一切工作正常，如果我做我自己的json對象，但我想從輸入字段中檢索數據並將其存儲在json對象中。

現在我可以從輸入字段中檢索1個值並存儲它。但我想要檢索多個值。這需要在地圖上設置方向。我需要找到一種將多個值作爲數組存儲在json對象中的方法。糾正我，如果我寫的有些東西錯了，我不是一個專家:)

「關鍵」：「陣列」

見下面的例子+代碼

這就是我需要嘗試得到：用戶來到頁面，看到2個輸入字段，他填寫阿姆斯特丹和羅馬，但他總是需要巴黎。所以用戶按下+圖標。另一個輸入字段出現，他填寫巴黎。當用戶提交此之下必須是JSON結果從輸入字段

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

這是我的形式：

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

我的js函數：

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

在谷歌地圖API我稱之爲功能和使用json：

var jsonArray = make_json();

來源

2017-01-23 Marc

你如何輸入它們？用空格隔開？ –

我不把它們分開，我只能填寫一個位置，我需要找到一種方法來添加多個位置。所以當有人想要添加另一個位置時，他們按下+圖標。另一個輸入字段出現，他們可以添加另一個位置等。 – Marc

單擊按鈕時，您可以聲明一個數組併爲其指定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。

來源

2017-01-23 19:46:58

非常感謝您幫助和學習我的東西:) – Marc

@Marc - 沒問題，很樂意幫助:-) –

如果您想要在添加新位置之前繼續顯示輸入的位置，也可以嘗試此操作。

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可能會變形。

來源

2017-01-23 20:26:23

從HTML輸入中檢索多個值並存儲在JSON鍵中，值[Array]

回答

相關問題