如何将用户输入的数据更新为 JSON答案

【问题标题】：How to update user inputted data into JSON如何将用户输入的数据更新为 JSON
【发布时间】：2021-05-19 22:24:22
【问题描述】：

使用 javascript，我将如何创建一个允许用户编辑/更新从 Json 文件呈现的用户配置文件页面 (html) 的函数？用户首先将他们的数据输入到请求用户响应的页面（路由文件夹中的 js 文件），然后通过另一个 js 路由将 Json 文件呈现在配置文件 html 页面下。

    var data = require("../data.json");

    exports.addUser = function(request, response) {      
        console.log(data);
        var name = request.query.name;
        var gender = request.query.gender;
        var height = request.query.height;
        var weight = request.query.weight;
        var newUser = {"name": name, "gender": gender, "height": height, "weight": weight};
        data.users.push(newUser);
        response.render('home');
    }

    // Get all of our user data
    var data = require('../data.json');

    exports.view = function(request, response){
        console.log(data);
        response.render('profile', data);
    };

我的问题是，如果用户已经保存了一次信息，我将如何创建一个允许用户更改其个人资料的功能？我的应用程序是关于以进步为主要关注点之一的健身房。用户第一次输入的信息（例如体重）不会与他们在健身房中的进展相同，因此我希望用户能够在他们进展时编辑该信息。

【问题讨论】：

您总是以相同的方式“编辑 JSON”：首先，您解码现有字符串以制作数据结构。然后，您编辑该数据结构。最后，您将新数据结构编码回JSON字符串并保存。始终将编码字符串视为“黑匣子”。不要试图编写代码来直接操作它，因为你总是会破坏一些东西。

标签： javascript html node.js json

【解决方案1】：

通常您会有一个“编辑配置文件”页面，该页面从服务器/数据库中检索信息，然后在您按下“保存”按钮时重新保存。

如果您希望此个人资料信息在其他页面上可用，您还可以将您的用户个人资料 json 保存到 localStorage。

【讨论】：

【解决方案2】：

您可能希望添加一个编辑用户页面并从 data.users 数组中找到现有用户，然后编辑他们的信息。您可以使用类似于以下功能的东西。

exports.editUser = function(request, response) {
    var name = request.query.name;
    var gender = request.query.gender;
    var height = request.query.height;
    var weight = request.query.weight;


    editDetails(data.users[findUser(name, data.users)]);
    response.render('home');

    function editDetails(array_index){
        data.users[array_index].name = name;
        data.users[array_index].gender = gender;
        data.users[array_index].height = height;
        data.users[array_index].weight = weight;
    }

    function findUser(name, array){
        for (let i = 0; i < array.length; i++) {
            if (array[i].name === name) {
                return i;
            }
        }
    }
}

这个函数的问题是如果两个名字相同，那么它会编辑名字的第一个实例。您可以添加一个唯一 id 以确保编辑的条目正是预期的内容。

【讨论】：