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

Question

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

我尝试使用 http.post，但没有成功，然后出于某种原因，我认为推送可能会起作用，因为 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>

您在下面看到的代码只是为了查看输入是否正确接线。最后这里是我的组件的 .ts 文件，包括 onSubmit 函数

控制台工作并显示从提交返回的对象，所以我知道这是有效的，但是我将如何将它添加到上面的 json 文件中？

Answer 1

您不能直接从简单的 js 中保存 JSON 文件，您需要在nodejs或一些脚本中使用后端服务器来处理请求。虽然您可以使用 json 将 json 保存到浏览器缓存中。localStorage.setItem('tasks',&nbsp;JSON.stringify(obj));并通过使用获得它var&nbsp;obj&nbsp;=&nbsp;JSON.parse(localStorage.getItem('tasks'));