从Javascript中的输入值解析JSON？
从Javascript中的输入值解析JSON？
提问于 2018-08-25 02:50:14
我对JSON这个主题完全陌生，我想知道如何从表单中的输入值解析JSON。
我尝试将输入字符串放入{"task“："( input ) "，"(input)"} {"description”："(input "，"(input) "}我尝试遵循与本文相同的方向：Adding a new array element to a JSON object，但当我希望能够从表单中的输入以相同的方式解析JSON时，它们引用的是已经形成的字符串。我希望能够以相同的方式保存每个输入并添加一个新的数组元素。
底层代码运行得很流畅，但我在解析JSON D方面是个新手。
function submitForm() {
var task = myForm.task.value;
var desc = myForm.description.value;
var FormData = {
task: task,
description: desc
};
myJSON = JSON.stringify(FormData);
localStorage.setItem("formJSON", myJSON);
text = localStorage.getItem("formJSON");
obj = JSON.parse(text);
addTask(task);
addDescription(desc);
console.log(FormData);
return false;
};
newArray = [task, description];
var taskArray = [];
var descriptionArray = [];
var task = document.getElementById("task").value;
var description = document.getElementById("description").value;
function addTask(task) {
taskArray.push(task);
console.log(
"Tasks: " + taskArray.join(", "));
}
function addDescription(description) {
descriptionArray.push(description);
console.log("Description: " + descriptionArray.join(", "));
};<!DOCTYPE html>
<html>
<title>Task Form</title>
<body>
<form class="form-inline" name="myForm" onsubmit=" return submitForm()">
<label class="required">*Task and Description* </label>
<!first text box>
<div class="form-group">
<input type="text" id="task" placeholder="Task">
</div>
<!second comment box>
<div class="form-group">
<input type="text" id="description" placeholder="Description">
</div>
<button type="submit" class="btn btn-default submit">Submit</button>
</form>
<script type="text/javascript " src="json.js "></script>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2018-08-25 03:40:40
您应该将所有任务的数组存储在localStorage中，而不仅仅是单个任务。当用户保存新任务时，从本地存储中读取JSON，解析它，将新任务添加到数组中，然后保存。
function submitForm() {
var task = myForm.task.value;
var desc = myForm.description.value;
var FormData = {
task: task,
description: desc
};
var arrayJSON = localStorage.getItem("formJSON") || "[]";
var taskArray = JSON.parse(arrayJSON);
taskArray.push(FormData);
localStorage.setItem("formJSON", JSON.stringify(taskArray));
addTask(task);
addDescription(desc);
console.log(FormData);
return false;
};
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52010214
复制相关文章
相似问题