How to fill and object with data from an array in javascript

Question

Really, the question is how to fill and object with data from a string, but string to array is trivial.

I need to end up with an object thus:

myobject={"x":5,"y":6,"w":7,"h":8}

starting from a string, thus:

var str = "5 6 7 8"

My solutions so far are

var myarray = str.split(' ');
var myobject = {
    x : myarray[0],
    y : myarray[1],
    w : myarray[2],
    h : myarray[3]
}

or

var myarray = str.split(' ');
var mynames = ['x','y',' w','h'];
 for (var i = mynames.length - 1; i >= 0; i--) {
    obj.[mynames[i]]=myarray[i]
 }

Wonder if there is a better way

If you have working code which you want to improve you can post here: codereview.stackexchange.com — yuriy636
– yuriy636, Commented Jul 14, 2017 at 18:34
@yuriy636 the second example here does not work, and this is a very trivial task. Code Review typically accepts more elaborate code submissions. — Patrick Roberts
– Patrick Roberts, Commented Jul 14, 2017 at 18:35

Ori Drori · Accepted Answer · 2017-07-14 19:08:07Z

2

I would use destructuring to assign the numbers to variables, and then assign them to the object using shorthand property names.

const str = "5 6 7 8";
const [x, y, w, h]  = str.split(' ');
const obj = { x, y, w, h };
console.log(obj);

answered Jul 14, 2017 at 19:08

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PEWColina Over a year ago

This is elegant but generates a little pollution with with 4 extra variables floating around. console.log(obj,x, y, w, h);

PEWColina Over a year ago

not a big deal in small applications, but they might already be assigned const. Also I would do var [x, y, w, h]... so you can use them again

Ori Drori Over a year ago

@PEWColina - they would be used inside a method, and will be garbage collected as soon as the method is done. Don't use reusable global variables, and if you need a assignable variable - use let. And thanks for the UV :)

Josh Beam · Accepted Answer · 2017-07-14 19:10:46Z

2

Array.prototype.reduce is your friend:

var myarray = str.split(' ');
var mynames = ['x','y',' w','h'];

var obj = myarray.reduce((acc, curr, i) => {
  acc[mynames[i]] = curr
  return acc
}, {})  // => {"x":5,"y":6,"w":7,"h":8}

acc is your accumulator object (your new output), and curr (current) is the current item in myarray.

This is dependent on the order of the items in your string that you're splitting, as well as the order of mynames.

Edit: this solution is compatible with ES6 and ES5 (if you use a regular function(){} as the callback instead of an arrow function).

edited Jul 14, 2017 at 19:10

answered Jul 14, 2017 at 18:35

Josh Beam

19.9k5 gold badges48 silver badges69 bronze badges

2 Comments

PEWColina Over a year ago

Thanks! This is interesting, although it is a bit longer and less scrutable than a loop.

Josh Beam Over a year ago

@PEWColina no problem, glad you find it interesting. It is a loop (albeit, not a "for loop") and in my experience, this is a pretty "idiomatic" JavaScript for doing this kind of thing (reduce is typically used for building objects or adding up values, stuff like that).

Abhinav Galodha · Accepted Answer · 2017-07-14 18:51:25Z

0

One option is using ES 6 destructuring. Destructuring allows assigning multiple values in a single statement. Also, spread syntax can be used for spreading the string to an array.

var outputObj = {x:'', y : '', w : '', h: ''};
var stringToConvert = "5678";
[outputObj.x, outputObj.y, outputObj.w, outputObj.h]  = [...stringToConvert];
console.log(outputObj);

answered Jul 14, 2017 at 18:51

Abhinav Galodha

9,9862 gold badges33 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to fill and object with data from an array in javascript

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related