【问题标题】:Map dynamically array to nested object将数组动态映射到嵌套对象
【发布时间】:2017-06-05 19:03:04
【问题描述】:

我想检索提交时的表单内容并将该数据映射到一个对象中。

let userData = $(e.currentTarget).serializeArray();
let userDataObject = this.serializedToObject(userData);

-- 通过 POST 发送的模板对象

serializedToObject(serializedArray) {
        let templateObject = {
            privider: '',
            pop3: {
                host: '',
                port: 110,
                ssl: false
            },
            imap: {
                host: '',
                port: 993
            },

            email: '',
            password: ''
        };

        for (let data in serializedArray) {
        }

        return templateObject;
    }

-- userData的形式是

[Object, Object, Object, Object, Object, Object, Object]

-- 当对象是形式时

Object: {
  name: 'provider',
  value: 'Aladin'
}

Object: {
  name: 'imap-host',
  value: '955'
}

Object: {
  name: 'imap-port',
  value: 
}


Object: {
  email: 'test@gmail.com',
  value: 
}

所以我需要一些帮助来将该对象数组映射到模板对象。 AnyHelp 将不胜感激。

更新

[{"name":"name","value":"Nicholas Barbaros"},{"name":"email","value":"george@google.com"},{"name":"password","value":"nicu121-mujik"},{"name":"imap","value":"imap.server.com"},{"name":"imap-port","value":"ad"},{"name":"pop3-host","value":"pop.server.com"},{"name":"pop3-port","value":"465"}, {"name":"pop3-ssl","value":"false"}]

【问题讨论】:

    标签: javascript arrays object dictionary indexof


    【解决方案1】:

    serializedArray 的每个对象的名称属性都有一个减号 (-) 表示嵌套对象,您可以按这些字符拆分,然后设置您的 templateObject 属性的值:

    var serializedArray = [{"name":"name","value":"Nicholas Barbaros"},{"name":"email","value":"george@google.com"},{"name":"password","value":"nicu121-mujik"},{"name":"imap","value":"imap.server.com"},{"name":"imap-port","value":"ad"},{"name":"pop3-host","value":"pop.server.com"},{"name":"pop3-port","value":"465"}, {"name":"pop3-ssl","value":"false"}];
    
    // your defaults
    var templateObject = {
        provider: '',
        pop3: {
            host: '',
            port: 110,
            ssl: false
        },
        imap: {
            host: '',
            port: 993
        },
        email: '',
        password: '',
    };
    
    serializedArray.forEach(function(obj) {
        var deep = obj.name.split('-');
        var key = deep.pop();
    
        var level = templateObject;
        deep.forEach(function(inner) {
            var nested = level[inner];
            var isObject = Object(nested) === nested;
            level = isObject ? nested : {};
        });
    
        level[key] = obj.value;
    });
    
    // return templateObject; // when inside your function
    console.log(templateObject);

    【讨论】:

    • 不是真的,我的 templateObject 是嵌套的,所以这行不通
    • 当然,我添加了stringify 版本
    • 如果 templateObject 中不存在来自 serializedArray 的对象名称会怎样?
    • 它使用默认值。
    • 我有点困惑。我的答案不是按现在的样子工作吗?
    【解决方案2】:

    你也可以使用reduce方法,以更实用的方式

    const array = [{
      name: 'provider',
      value: 'Aladin'
    },{
      name: 'imap-host',
      value: '955'
    },{
      name: 'imap-port',
      value: 'something'
    }];
    
    const newObject = array.reduce( (acc, item, {}) => {
      acc[item.name] = item.value;
      return acc;
    })
    
    console.log(newObject);
    

    小提琴链接:https://jsfiddle.net/y5xkddnn/

    【讨论】:

    • 不是真的,我的 templateObject 是嵌套的,所以这行不通
    • 因此您可以调整代码以使用一些递归性;-)
    【解决方案3】:

    迭代序列化数组并将其映射到嵌套对象的开销太大。

    请考虑这种不太复杂的方法:

    let userData = new FormData($(e.currentTarget)[0]);
    let userDataObject = serializedToObject(userData);
    
    function serializedToObject(data) {
        return {
            provider: data.get('provider'),
            pop3: {
                host: data.get('pop3-host'),
                port: data.get('pop3-port'),
                ssl:  data.get('pop3-ssl')
            },
            imap: {
                host: data.get('imap-host'),
                port: data.get('imap-port')
            },
    
            email: data.get('email'),
            password: data.get('password')
        };
    }
    

    我猜到了这里的一些字段。如果需要,请更正它们。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2013-02-02
      • 2019-07-26
      • 2021-02-08
      • 2023-01-23
      • 1970-01-01
      • 1970-01-01
      • 2011-07-24
      相关资源
      最近更新 更多