mapping json object with weird json fields, indexed by number using lodash

Question

I am trying to parse a json response from a server. There is nothing I can do with the server side, as it cannot be changed any time soon.

Here is what their json response looks like:

{
    prop[1][foo]: "foo number 1",
    prop[1][bar]: "bar number 1",
    prop[1][bazz]: "bazz number 1",
    prop[2][foo]: "foo number 2",
    prop[2][bar]: "bar number 2",
    prop[2][bazz]: "bazz number 2"
}

Now I want it to be like this:

{
    props: [
        {foo: "foo number 1", bar: "bar number 1", bazz: "bazz number 1"},
        {foo: "foo number 2", bar: "bar number 2", bazz: "bazz number 2"}
    ]
}

How do I do this, I can't figure out how to iterate and set things over.

My attempt:

var temp = [];

var regExp = /\[([^)])\]/;
var matches;
_.each(element, function(value, key) {
    if (key.indexOf('foo') >= 0) {
        matches = regExp.exec(key);
        temp[matches[1]] = value;
    }

});

Answer 1

You can make use of the _.set(object, path, value), it will evaluate the path that you set for each value in your response object.

DEMO

Javascript

var data = {
    "prop[1][foo]": "foo number 1",
    "prop[1][bar]": "bar number 1",
    "prop[1][bazz]": "bazz number 1",
    "prop[2][foo]": "foo number 2",
    "prop[2][bar]": "bar number 2",
    "prop[2][bazz]": "bazz number 2"
};

function evaluate(data) {
  var newData = {};
  _.each(data, function(value, key) {
    _.set(newData, key, value);
  });
  return definedItemsOnly(newData);
}

// Since the resulting value of the given data set above
// doesn't have prop[0] then this function below 
// will provide you the means of removing any potential
// undefined values in an array or possibly undefined 
// key values in an object.
function definedItemsOnly(item) {
  var isDefined = _.negate(_.isUndefined);
  if(_.isArray(item)) {
    return _.filter(item, isDefined);
  } else if(_.isObject(item)) {
    return _(item).pick(isDefined).mapValues(definedItemsOnly).value();
  }
  return item;
}

console.log(evaluate(data));

If you want the _.each callback in a more composed form you can change the evaluate() function like this:

function evaluate(data) {
  var newData = {};
  _.each(data, _.rearg(_.partial(_.set, newData), [1, 0]));
  return definedItemsOnly(newData);
}

Answer 2

We can do string manipulation, because using "eval()" is a bad idea in javascript

var injson = '{prop[1][foo]: "foo number 1",    prop[1][bar]: "bar number 1",    prop[1][bazz]: "bazz number 1",    prop[2][foo]: "foo number 2",    prop[2][bar]: "bar number 2",    prop[2][bazz]: "bazz number 2"}'

injson = injson.replace("{","");
injson = injson.replace("}","");
injson = injson.split("\",");

var outarr = [];

for(var index=0;index<injson.length;index++){
    var _key = $.trim(injson[index].split(":")[0]);
    var _value = $.trim(injson[index].split(":")[1]);
    _value = _value.substring(1, _value.length-1);
    var _index = parseInt(_key.substring(_key.indexOf("[")+1).substring(0,1));
    var _prop = _key.substring(_key.indexOf("][")+2, _key.length-1);
    if(!outarr[_index])
       outarr[_index] = {};
    outarr[_index][_prop] = _value;
};
console.log(outarr);

Something like this

In case if you want to use eval you can try to reduce the code inside the for loop