从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]

回答

相关问题