0

I'm completely new to the subject of JSON and I was wondering how to parse JSON from an input value in my form.

I'm trying to string the inputs into an array like {"task" : "(input) ", "(input) "} {"description" : "(input ", "(input)"} I tried to follow the same directions as this post: Adding a new array element to a JSON object but they're referring to strings already formulated when I want to be able to parse JSON the same way from an input in my form. I want to be able to save every input and add a new array element the same way.

Bottom code runs smoothly but I'm such a noobie at parsing JSON D: any help is appreciated.

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>
Jess Y.
  • 67
  • 2
  • 8

1 Answers1

0

You should be storing the array of all tasks in localStorage, not just a single task. When the user saves a new task, read the JSON from local storage, parse it, add the new task to the array, and save that.

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;
};
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Hmm for some reason the code above doesn't work for me – Jess Y. Aug 24 '18 at 21:15
  • I had the wrong variable in `JSON.stringify()`, I fixed it. – Barmar Aug 24 '18 at 21:19
  • Yeah I tested it out and still the push method is not working :( also is my bottom code alright(function addTask, function addDescription)? or should I store those in JSON as well? – Jess Y. Aug 25 '18 at 01:16
  • You should just keep everything in a global `taskArray` variable, you don't need the separate `descriptionArray`. – Barmar Aug 25 '18 at 21:49