Javascript递归对象迭代生成表单元素名称

翅膀

我有一个AJAX响应,其中包含一个对象,该对象存储我的所有表单元素结构及其相应的错误消息(如果有)。该对象结构的构建如下:

var obj = {
    'entity1': { //Entity
        'attribute1': { //Field
            'isEmpty': "This value is required" //rule with error message
        },
        'attribute2': { //Field
            'isEmpty': "This value is required" //rule with error message
        }
    },
    'entity2': { //Entity
        'attribute1': { //Field
            'isEmpty': "This value is required" //rule with error message
        },
        'attribute2': { //Field
            'isEmpty': "This value is required" //rule with error message
        }
    }
};

所有这些字段均以被主要实体包围的形式存储,如下所示:

<input name="mainentity[entity1][attribute1]" />
<input name="mainentity[entity1][attribute2]" />
<input name="mainentity[entity2][attribute1]" />
<input name="mainentity[entity2][attribute2]" />
...

基本上,我需要迭代此对象以组装输入的名称,以便能够使用jQuery找到它们,因此我可以将它们各自的错误消息添加到DOM中。

我试图在javascript中创建此功能:

var prefix = 'mainentity', inputs = {};
function iterate(obj, partialName, isChild) {
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            switch (typeof obj[property]) {
                case 'string':
                    if (!inputs.hasOwnProperty(partialName)) {
                        inputs[partialName] = [];
                    }
                    inputs[partialName].push(obj[property]);
                    break;
                default:
                    if (isChild) {
                        partialName += '[' + property + ']';
                    } else {
                        partialName = prefix + '[' + property + ']';
                    }
                    iterate(obj[property], partialName, true);
                    break;
            }
        }
    }
};
iterate(obj);
console.log(inputs);

我基于属性的类型。如果为string,则为消息。否则,它是递归中需要考虑的字段。我尝试使用该标志isChild只是为了知道何时确切地将断开partialName并作为新属性重新开始。

问题是最终结果变得像这样:

{
    'mainEntity[entity1][attribute1]': ["This value is required"],
    'mainEntity[entity1][attribute1][attribute2]': ["This value is required"], //wrong result, attribute1 shouldn't be here
    'mainEntity[entity2][attribute1]': ["This value is required"],
    'mainEntity[entity2][attribute1][attribute2]': ["This value is required"], //wrong result, attribute1 shouldn't be here
}

我期望这样:

{
    'mainEntity[entity1][attribute1]': ["This value is required"],
    'mainEntity[entity1][attribute2]': ["This value is required"], //No attribute 1 here
    'mainEntity[entity2][attribute1]': ["This value is required"],
    'mainEntity[entity2][attribute2]': ["This value is required"], //No attribute 1 here
}

我了解这个问题。isChild标志仅适用于更高级别,并且考虑到按照我的逻辑,从递归开始的所有内容都是孩子,因此partialName不能正常工作。

如何使此功能按预期工作?我的意思是,我怎么知道正确的时间将部分名称分解为新的输入,而不是连接到错误的先前字段,并使其在N个嵌套的响应对象中适用于任何情况?

此替代方法递归循环,并连接来自对象的每个新发现的键。

var obj = {  'entity1': {    'attribute1': {       'isEmpty': "This value is required1"     },    'attribute2': {      'isEmpty': "This value is required2"     }  },  'entity2': {  'attribute1': {       'isEmpty': "This value is required3"  },    'attribute2': {     'isEmpty': "This value is required4"   }  }};

function loop(o, currentPath, result) {
  Object.keys(o).forEach(function(k) {
    if (typeof o[k] === 'string') result[`${currentPath}`] = [o[k]];
    else loop(o[k], `${currentPath}[${k}]`, result);    
  });
}

var result = {};
loop(obj, 'mainEntity', result);

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章