Javascript 如何将提交数据推送到现有的本地json文件中？

我有一个任务，我是新手。我必须将来自提交表单的数据推送到本地已有的json文件中。我的任务是创建一个角度应用程序，用户可以在其中创建新任务，然后在不同的页面上查看它们

我尝试使用http.post，但没有成功，然后出于某种原因，我认为推送可能会起作用，因为json是一个数组，但实际上没有起作用，因为我有点不知所措

以下是我的json文件的外观，要求中还规定我必须有一个硬编码的json文件，所以看起来是这样的：

{
    "tasks": [
        {
            "name": "Dishes",
            "timeToComplete": "10 Minutes",
            "description": "Cleaning the dishes",
            "itemsNeeded": "Soap, Sponge, Water, Dirty Dishes!"
        }
    ]
}

以下是具有以下格式的组件的html代码：

    <div>
    <h3>Create A New Task</h3>
    <form (ngSubmit)='onSubmit()'>
        <label for='name'>Name of Task:</label>
        <input type='text' id='name' placeholder='Name' name='name' 
    required [(ngModel)]='task.name' />
        <br>
        <label for='time'>Estimated Time to Complete:</label>
        <input type='text' id='time' placeholder='Time' name='timeToComplete' required
            [(ngModel)]='task.timeToComplete' />
        <br>
        <label for='description'>Description of Task:</label>
        <input type='text' id='description' placeholder='Description' name='description' required
            [(ngModel)]='task.description' />
        <br>
        <label for='itemsNeeded'>Items to complete task:</label>
        <textarea type='text' id='itemsNeeded' placeholder='Items' name='itemsNeeded' required
            [(ngModel)]='task.itemsNeeded'></textarea>
        <button type='submit'>Submit</button>
        <p>If all looks good, go ahead and hit submit!</p>
    </form>
    <hr>

    <div>
        <h1>Here's what your task looks like: </h1>
        <h3>Your Task: {{ task.name }}</h3>
        <h4>Time it will take: </h4><p>{{ task.timeToComplete }}</p>
        <h4>Description of what you will be doing: </h4><p>{{ task.description }}</p>
        <h4>What you will need, to succeed! </h4><p>{{ task.itemsNeeded }}</p>
    </div>


</div>

---

控制台工作并显示从提交返回的对象，因此我知道这是可行的，但我如何将其添加到上面的json文件？

通过Ajax、Websocket或其他方式加载json文件，并首先将其解析为对象或数组

  result = JSON.parse(data);

现在，您的内存中有一个很好的对象或数组。您可以在该对象上进行更改

如果您必须硬编码，那么就更容易了；）

现在它在内存中也可以更改。第一次处理JSON有点混乱。“{”表示OBJECCT aka dictionary，“[”表示数组。在您的情况下，您首先有一个对象/字典。因此有些人希望在数据结构中有很多内容（应用程序颜色、公司名称）最后一个对象是所有的任务。任务隐式地意味着可能会有更多的任务。所以他使用下一个数组来存储所有任务。当然，一个任务也可以有很多需要考虑的事情，所以他将它们存储在一个对象中。就像你的html代码所示

现在你可以读出你的表格了 然后像这样做

 taskdata ={}     // create a empty OBJECT/Dictionary
 taskdata.name=document.forms["you forget to name your form ;) "].name.value;
 taskdata.name=document.forms["you forget to name your form ;) "].
 timeToCompleten.value;
 //and so on

因此，vanilla javascript taskdata现在可以保存您的所有内容，并且可以序列化以满足POST请求

  var data = taskdata.JSON.stringify()  

现在，数据里面有很多“？”和“&”，对于每个帖子和获取操作来说都是可以理解的

我猜这个“老派”代码甚至可以在netscape navigator 4.7中工作，直到任何firefox或chrome每晚都可以使用

---

在此之前，我可以建议您使用任何花哨的“现代”语言。我对javascript库或我懒得打字没有任何意义，因为我是一个时髦的人"图书馆可以从ORILLY JavaScript中简单地阅读一本好书。甚至可以免费在网络上找到。）谷歌也可能是一种帮助。了解这样一个LIB的基础是一个很好的方式去做任何事情。不仅仅是他们承诺或试图强迫你的事情。JavaScript是现在的F****在快速。但似乎我们试着把它和我们一样。可以通过“libs”。.oO（JQuery是最好的例子-跟踪“getElementByID”并获取蠕虫）

您不能直接从简单的js保存JSON文件，您需要在节点js中安装一个后端服务器或一些脚本来处理请求

尽管可以使用将json保存到浏览器缓存中

localStorage.setItem('tasks', JSON.stringify(obj));

通过使用

var obj = JSON.parse(localStorage.getItem('tasks'));

---

http的输出是什么？@NidhinJoseph不太确定我是否完全理解你的问题，因为http没有输出任何东西#1你试图推送的数据格式是什么？#2你的问题是寻求帮助将数据推送到json文件，你的意思是写入该文件吗？请你进一步澄清一下输出的情况来自http的ut？谢谢。

this.http.post(this.url, taskdata)// ive no meaning about angular i code 
 //plain since 
 //over 20 years who needs that :)

localStorage.setItem('tasks', JSON.stringify(obj));

var obj = JSON.parse(localStorage.getItem('tasks'));