How to convert object key dot notation to object tree in javascript

Question

I have a form and I want to send it to an ajax endpoint, for this I have this helper method:

    $.fn.serializeFormToObject = function() {
      //serialize to array
      var data = $(this).serializeArray();
      //add also disabled items
      $(':disabled[name]', this)
        .each(function() {
            data.push({ name: this.name, value: $(this).val() });
        });

      //map to object
      var obj = {};
      data.map(function(x) { obj[x.name] = x.value; });
      return obj;
    };

The problem is that I have dot notation in some of the names of my form (using MVC strong typed model) So I have this object as result:

Task.Addresses.Box:""
Task.Addresses.City:"Limal"
Task.Addresses.Country:"Belgique"
Task.Deadline:"1/10/2017 12:18:18 PM"
Task.TaskSourceId:"1"

And the result expected would be:

{ Task : { Addresses: { Box: "", City: "Limal", Country: "Belgique"}, Deadline: "1/10/2017 12:18:18 PM", TaskSourceId:"1" } }

I use the lodash library but after some hours I cannot find a way to do this expected result.

Can someone provide me a working javascript helper to give the expected nested object?

Edit: For duplicated question, the other question does not ask about combined nested object together

After the answer of @ori-drori, This code is working as expected:

$.fn.serializeFormToObject = function() {
    //serialize to array
    var data = $(this).serializeArray();
    //add also disabled items
    $(':disabled[name]', this)
        .each(function() {
            data.push({ name: this.name, value: $(this).val() });
        });

    //map to object
    var obj = {};
    data.map(function (x) { obj[x.name] = x.value; });

    var objNested = {};
    _.forEach(obj, function (value, key) { _.set(objNested, key, value) });
    return objNested;
};

Answer 1

Iterate the data using Array#forEach , and assign the value to the path (name) using _.set() :

data.forEach(function(x) { _.set(obj, x.name, x.value) });

I don't have you're original data, so here is a demo using the key-values you provided.

 var fields = { "Task.Addresses.Box": "", "Task.Addresses.City": "Limal", "Task.Addresses.Country": "Belgique", "Task.Deadline": "1/10/2017 12:18:18 PM", "Task.TaskSourceId": "1" }; var obj = {}; _.forEach(fields, function(value, key) { _.set(obj, key, value); }); console.log(obj);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>