Map dynamically array to nested object

Question

I want to retrieve the form content on a submit and map that data into an object.

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

-- Template objects to send through 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;
    }

-- The form of the userData is

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

-- While on object is of form

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

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

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


Object: {
  email: '[email protected]',
  value: 
}

So I need some help to map that array of objects to the templateObject. AnyHelp will be highly appreciated.

Update

[{"name":"name","value":"Nicholas Barbaros"},{"name":"email","value":"[email protected]"},{"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"}]

Washington Guedes · Accepted Answer · 2017-06-05 20:19:20Z

2

The name-property of each serializedArray's object has a minus-character (-) representing nested objects, you can split by those characters and then set the values of your templateObject's properties:

var serializedArray = [{"name":"name","value":"Nicholas Barbaros"},{"name":"email","value":"[email protected]"},{"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);

edited Jun 5, 2017 at 20:19

answered Jun 5, 2017 at 19:06

Washington Guedes

4,3753 gold badges35 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Nicholas Over a year ago

not really, my templateObject is nested so this wont work

Nicholas Over a year ago

Sure, I added the stringify version

Washington Guedes Over a year ago

What should happen if an object name from serializedArray does not exist in the templateObject?

Nicholas Over a year ago

it uses the default values.

Washington Guedes Over a year ago

I'm a bit confused. Isn't my answer working as it stands?

|

Christian Benseler · Accepted Answer · 2017-06-05 19:12:12Z

0

You can also use reduce method, in a more functional way

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);

Link to fiddle: https://jsfiddle.net/y5xkddnn/

answered Jun 5, 2017 at 19:12

Christian Benseler

8,0839 gold badges42 silver badges73 bronze badges

2 Comments

Nicholas Over a year ago

not really, my templateObject is nested so this wont work

Christian Benseler Over a year ago

So you can adapt the code to use some recursivity ;-)

Kosh · Accepted Answer · 2017-06-05 19:28:46Z

There is too much overhead to iterate serialized array and map it to the nested object.

Please consider this approach, which is less complicated:

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')
    };
}

I guessed some fields here. Please correct them if needed.

Collectives™ on Stack Overflow

Map dynamically array to nested object

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related