Efficiently or more functionally create an object from an array

Question

Is there a more functional way to create an object in JavaScript programatically without assigning each key individually?

For example, given this array (imagine it comes from an outside data source):

let arr = ['a=1', 'b=2', 'c=3'];

What is an easy way to convert this to an object like so?

let expectedResult = { a: '1', b: '2', c: '3'};

It's clunky to assign a new object and loop over the elements with a for or foreach. It would be nice if there were something akin to map that could yield such a final result.

Imagine you could do this:

arr
  .map(item => new KeyValuePair(itemKey, itemValue)) // magically get itemKey/itemValue
  .toObjectFromKeyValuePairs();

That'd be it right there. But of course there's no such function built in.

Answer 1

If you're looking for a more functional approach to the code, you could use a library such as Lodash which makes code more succinct.

You could use _.fromPairs to convert pairs of data in arrays to key-value pairs of an object.

const convert = arr => _(arr)
    .map(s => _.split(s, '=', 2))
    .fromPairs()
    .value();
console.log(convert(['a=1', 'b=2', 'c=3']));

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

Answer 2

You could use reduce, split and slice:

var arr = ['a=1', 'b=2', 'c=3'];

var out = arr.reduce(
  function (output, input) {
    if (typeof input === 'string') {
      var key = input.split('=',1)[0];
      output[key] = input.slice( key.length + 1 );
    }
    return output;
  },
  {}
);

I use the second argument of split to make it stop after the first = found. Then using slice on the input (treating it as an array of characters) allows the value to contain the = separator as in the case of a=b=c.

By using slice, the value will always be a string, even if it is an empty one. If you want to have null values you could change the line to:

output[key || null] = input.slice( key.length + 1 ) || null;

The type check for string is present since split throws error on null and undefined.

If you wanted to parse the current page's query string for example, you could do it using the above technique just like this:

function getQueryStringParams() {
  var reEncodedSpace = /\+/g;
  return location.search.length > 1 // returns false if length is too short
    && location.search.slice( 1 ).split( '&' ).reduce(
      ( output, input ) => {
        if ( input.length ) {
          if ( output === false ) output = {};
          input = input.replace( reEncodedSpace, ' ' ); //transport decode
          let key = input.split( '=', 1 )[ 0 ]; // Get first section as string
          let value = decodeURIComponent( input.slice( key.length + 1) ); // rest is value
          key = decodeURIComponent( key ); // transport decode

          // The standard supports multiple values per key.
          // Using 'hasOwnProperty' to detect if key is pressent in output,
          // and using it from Object.prototype instead of the output object
          // to prevent a key of 'hasOwnProperty' to break the code.
          if ( Object.prototype.hasOwnProperty.call( output, key ) ) {
            if ( Array.isArray( output[ key ] ) ) {
              // Third or more values: add value to array
              output[ key ].push( value );
            } else {
              // Second value of key: convert to array.
              output[ key ] = [ output[ key ], value ];
            }
          } else {
            // First value of key: set value as string.
            output[ key ] = value;
          }
        }
        return output;
      },
      false
    );
}

The function returns false if the search is empty.

Answer 3

If you're willing to spare having one additional line for declaration, this could work for you. Although using a library like lodash or underscore, as mentioned in other answers would certainly help:

var arr = ['a=1', 'b=2', 'c=3'];
var expectedResult = {};
arr.map(function(value) { 
    var kv = value.split("="); 
    expectedResult[kv[0]] = kv[1]; 
    return value    
})

Answer 4

Try The Below Code.

let arr = ['a=1', 'b=2', 'c=3'];
let b=arr.toString();
b='{"'+(b.split('=').join('":"').split(',').join('","'))+'"}';
b=$.parseJSON(b);
console.log(b);

You will get the required output.