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

Possible duplicate of [Convert JavaScript string in dot notation into an object reference](http://stackoverflow.com/questions/6393943/convert-javascript-string-in-dot-notation-into-an-object-reference) — haxxxton, Jan 10 '17 at 05:34

Ori Drori · Accepted Answer · 2017-01-10T06:55:22.363

6

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>

edited Jan 10 '17 at 06:55

answered Jan 10 '17 at 05:35

Ori Drori

183,571
29
224
209

1

Hi what is the vice versa of this. If I need to object to . dot fields? – Dark Knight May 19 '20 at 07:16
It's more complicated but doable. Open another question. – Ori Drori May 19 '20 at 09:39
https://stackoverflow.com/questions/61889456/create-json-schema-using-an-object Pls check – Dark Knight May 19 '20 at 11:01

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

1 Answers1