Create a JavaScript object from string

Question

I'm trying to create a JavaScript function that creates an object using strings for structure and fills it from DOM data.

For example, the following strings could look like this:

some.example.here = "hello"
some.example.there = "hi"
other.example = "heyo"

Which should create this object:

{
    some: {
        example: {
            here: "hello",
            there: "hi"
        },
    other: {
        example: "heyo
    }
}

The data as said comes from DOM and is being load at the code segment labeled "read data into object". The data loads fine and the object structure is being setup fine as well, but the data is not being put into the data field.

Here's the code for the function:

function getDataFromElement(element) {
  obj = {};
  $(element)
    .find("[data-value]")
    .each(function() {
      // create object node
      valueObj = {};
      currentValueObj = valueObj;
      $.each($(this).attr("data-value").split("."), function(i, objpath) {
        currentValueObj[objpath] = {};
        currentValueObj = currentValueObj[objpath];
      });

      // read data into object
      if($(this).is("[data-putvalue]") && $(this).attr("data-putvalue") != "html") {
        currentValueObj = $(this).attr($(this).attr("data-putvalue"));
      } else {
        currentValueObj = $(this).html();
      }

      console.log(currentValueObj);

      // combine with previous gathered data
      obj = $.extend(true, {}, obj, valueObj);
    });

  return obj;
}

Does anyone know what to do?

Can include `html` at Question? , create stacksnippets , jsfiddle http://jsfiddle.net to demonstrate ? — guest271314, Aug 15 '15 at 21:32
What is purpose of `currentValueObj = currentValueObj[objpath];` ? — guest271314, Aug 15 '15 at 21:38
With the second each loop I'm trying to create the object structure, so the loop goes through each element of the string, creates a new subelement with the current string-element-name with `currentValueObj[objpath] = {};` and goes into that subelement with `currentValueObj = currentValueObj[objpath];`, so that in the next loop-walk the next subelement will be created there. — Lukas Bach, Aug 15 '15 at 21:46
`currentValueObj` appear overwritten at each iteration ? Can include `html` at Question , create stacksnippets to demonstrate ? — guest271314, Aug 15 '15 at 21:51

Michał Perłakowski · Answer 1 · 2015-08-15T22:03:03.460

4

I would do it like this:

var createObject = function(model, name, value) {
  var nameParts = name.split("."),
  currentObject = model;
  for (var i in nameParts) {
    var part = nameParts[i];
    if (i == nameParts.length-1) {
      currentObject[part] = value;
      break;
    }
    if (typeof currentObject[part] == "undefined") {
      currentObject[part] = {};
    }
    currentObject = currentObject[part];
  }
};

And then use it like that:

var model = {};
createObject(model, "some.example.here", "hello");
createObject(model, "some.example.there", "hi");
createObject(model, "other.example", "heyo");

edited Aug 15 '15 at 22:03

answered Aug 15 '15 at 21:47

Michał Perłakowski

88,409
26
156
177

this creates different models/objects for each key-value – Nikos M. Aug 15 '15 at 21:58

Nikos M. · Accepted Answer · 2015-08-15T21:53:09.613

Probably this can suit you (adapted from another project of mine, adapt and use as needed): NOTE the element's name is taken as key and value as the value

function fields2model( $elements, dataModel )
{
    $elements.each(function( ){
        var $el = $(this), 
            name = $el.attr('name'), 
            key, k, i, o, val
        ;

        key = name;

        val = $el.val() || '';

        k = key.split('.'); o = dataModel;
        while ( k.length )
        {
            i = k.shift( );
            if ( k.length ) 
            {
                if ( !o.hasOwnProperty( i ) ) o[ i ] = /^\d+$/.test( k[0] ) ? [ ] : { };
                o = o[ i ];
            }
            else 
            {
                o[ i ] = val;
            }
        }
    });
}

Example use:

<input name="some.example.here" value="hello" />
<input name="some.example.there" value="hi" />


var model = {};
fields2model($('input,textarea,select'), model);

The example elements above will give the below model:

model = {
some: {
    example: {
        here: "hello",
        there: "hi"
    }
};

I tried your function here: https://plnkr.co/edit/NhsnQJs1iYWKUCff2aVU?p=preview but it did not work - probably my mistake. Can you help, please? — ESP32, Jul 28 '16 at 10:09
I got it working: https://plnkr.co/edit/EyGmop9CmYO3WAf9odvU Javascript is strange - isn't it? ;-) — ESP32, Jul 28 '16 at 10:40

theFreedomBanana · Answer 3 · 2021-05-19T07:55:42.203

2

Some functional implementation:

const value = 'hello';
'some.example.here'.split('.').reverse().reduce((reduction, segment, index) => {
  const result = {};
  if (index === 0) {                                                                 
    result[segment] = value;
  } else {                                                               
    result[segment] = reduction;
  }

  return result;
}, {})

edited May 19 '21 at 07:55

answered Oct 15 '20 at 10:01

theFreedomBanana

2,462
2
22
29

1

where does that `currentTarget` comes from? – mindmaster May 14 '21 at 15:37

score 1 · Answer 4 · answered Nov 15 '21 at 17:05

1

@theFreedomBanana +1

Works for me

const magicFunction = (string, value) =>
  string
    .split('.')
    .reverse()
    .reduce((acc, cur, index) => ({ [cur]: index === 0 ? value : acc }), {});

answered Nov 15 '21 at 17:05

jeremydelacasa

49
1
6

Please don't add "thank you" as an answer. Instead, just vote up the answers that you find helpful. - [From Review](/review/late-answers/30348256) – tdy Nov 16 '21 at 03:43

Create a JavaScript object from string

4 Answers4

Linked