从Javascript中的输入值解析JSON？答案

【问题标题】：Parsing JSON from input value in Javascript?从Javascript中的输入值解析JSON？
【发布时间】：2018-08-25 05:18:43
【问题描述】：

我对 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>

【问题讨论】：

您要查找的预期输出是什么，从上面的代码来看，解析后的 JSON 输出看起来不错 - {task: "test", description: "aaaaaa"} - codepen.io/nagasai/pen/OoMVVE
“我很擅长解析 JSON” -> JSON.parse() O.o
@Andreas LOL 我认为还有更多！嘘

标签： javascript html json

【解决方案1】：

您应该将所有任务的数组存储在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;
};

【讨论】：

嗯，出于某种原因，上面的代码对我不起作用
JSON.stringify() 中的变量有误，我已修复。
是的，我测试了它，但推送方法仍然无法正常工作:(我的底部代码也可以吗（函数 addTask，函数 addDescription）？或者我也应该将它们存储在 JSON 中？
你应该把所有的东西都放在一个全局的taskArray变量中，你不需要单独的descriptionArray。