合并 Javascript 对象中的一些值

Question

我想知道是否可以将对象中的某些值合并到 array/object。我目前正在开发一个模块来创建报价单，每次表单中的值发生更改时，我都想将表单数据发送到服务器（异步 ajax 调用）以自动保存报价单。我正在获取表单数据（通过 react hook form 的 getValues() 函数），如下面的屏幕截图所示：

如屏幕截图所示，有多个 lines[0] 和 lines[1] 条目，它们都是单独的条目。要将其发送到服务器，我需要如下数据：

client_id: "686",
condition: "7",
...
lines: {
    0: {
        amount: 1,
        description: 'Test line 1',
        price: 100,
    },
    1: {
        amount: 1,
        description: 'Test line 2',
        price: 200,
    }
},
...

这里有人知道如何将我的数据转换成上面示例中的数据吗？提前致谢！

Answer 1

一般来说，对于合并值，人们应该查看 Object.assign()。

在这种特殊情况下，要从第二个屏幕截图转到第一个屏幕截图，您可能使用了循环，例如：

let newObject = {};
for (let lineIndex=0; lineIndex<lines.length; lineIndex++) {
    for (let fieldIndex=0; fieldIndex<Object.keys(lines[lineIndex]).length; fieldIndex++) {
        let newKey = "lines["+lineIndex+"]."+fieldIndex<Object.keys(lines[lineIndex])[fieldIndex];
        newObject[newKey] = lines[lineIndex][Object.keys(lines[lineIndex])[fieldIndex]]
    }
}

要走另一条路，你基本上会做相反的事情。执行此操作的最佳方法的细节取决于您的字段集的可预测性以及您是否知道长度。否则，您可以通过遍历 flatter 对象中的键并进行 if(Object.keys(flatterObject)[index].startsWith("lines[")).

之类的测试来进行猜测

Answer 2

是的，有一种方法可以做您想做的事，但在此之前，我建议您更深入地了解您正在使用的库。以下是在 React Hook Form 中处理数组的方法：https://react-hook-form.com/advanced-usage#FieldArrays

在 "fixing" 之后，如果您仍然希望 lines: {} 成为一个对象，而不是数组，那么一个简单的数组 reduce 可以为您构建它。

Answer 3

这里是任何带有点的键的解决方案。扩展方括号的解决方案：

var source = {
    id:12,
    cond:"true",
    'lines[0].amount':"1",
    'lines[0].description':"a1",
    'lines[1].amount':"1",
    'lines[1].description':"a1",
};

var target = {};
for (var key in source) {
    if (source.hasOwnProperty(key)) {
        set(target, key, source[key])
    }
}

function set(obj, path, value) {

    obj = typeof obj === 'object' ? obj : {};    
    path = path.replace("[",".").replace("]","")
    var keys = Array.isArray(path) ? path : path.split('.');   
    var curStep = obj;

    for (var i = 0; i < keys.length - 1; i++) {

        var key = keys[i];        
        if (!curStep[key] && !Object.prototype.hasOwnProperty.call(curStep, key)){            
            var nextKey = keys[i+1];
            var useArray = /^\+?(0|[1-9]\d*)$/.test(nextKey);
            curStep[key] = useArray ? [] : {};
        }        
        curStep = curStep[key];
    }
    var finalStep = keys[keys.length - 1];
    curStep[finalStep] = value;
};

合并 Javascript 对象中的一些值

Merging some values in Javascript Object

javascript

reactjs

react-hook-form