1

If my state object is like this,

this.state={
  input:{
    employee_count_range: {
        value: props.employee_count_range || '',
        errMsg: null
    },
    phone: {
        value: '',
        errMsg: null
    },
    city: {
        value: '',
        errMsg: null
    }
  }
}

and user object is like this,

let user = {
   employee_count_range: '',
   phone: '',
   city: ''
}

Is there any way of doing this with ES6 without going through a loop?

Object.keys(this.state.inputs)
     .map(field => user[field] = this.state.input[field].value);

I want to assign state object each inside value to user object values

10
  • 1
    what is your desired output ? Commented Jul 25, 2018 at 9:51
  • 1
    Without going into a loop means - no loop at all (no map forEach, etc...) or no for/while loops? Commented Jul 25, 2018 at 9:51
  • @NarendraJadhav I want to assign state object inner values to user object. Commented Jul 25, 2018 at 9:51
  • 2
    @Lasitha - My question contained two options. Which is them is right ? Commented Jul 25, 2018 at 9:53
  • 1
    @OriDrori no maps, foreach, for/while loops Commented Jul 25, 2018 at 9:55

1 Answer 1

3

In your reply to my question "Is it important that you discover the names of the properties in this.state.inputs dynamically, or is it okay to list them literally?", you've said:

it's ok to list them literally. I know I can do it with a loop. I just want to know if there's any possibility.

Absolutely, no need for a loop at all, direct assignment is the simple, direct approach:

user.employee_count_range = this.state.inputs.employee_count_range.value;
user.phone = this.state.inputs.phone.value;
user.city = this.state.inputs.city.value;

Live example (using state rather than this.state):

const state = {
  inputs: {
    employee_count_range: {
      value: 42
    },
    phone: {
      value: "123 456 7890"
    },
    city: {
      value: "London"
    }
  }
};
const user = {};

user.employee_count_range = state.inputs.employee_count_range.value;
user.phone = state.inputs.phone.value;
user.city = state.inputs.city.value;

console.log(user);

You can also use destructuring assignment to do it, but it doesn't buy you much of anything and it can be tricky to read:

({
  employee_count_range: {value: user.employee_count_range},
  phone: {value: user.phone},
  city: {value: user.city}
} = this.state.inputs);

Live example (using state rather than this.state):

const state = {
  inputs: {
    employee_count_range: {
      value: 42
    },
    phone: {
      value: "123 456 7890"
    },
    city: {
      value: "London"
    }
  }
};
const user = {};

({
  employee_count_range: {value: user.employee_count_range},
  phone: {value: user.phone},
  city: {value: user.city}
} = state.inputs);

console.log(user);


All of the below assumes you want to find the property names dynamically, which it now turns out isn't the case.

If you mean you want to replicate this:

Object.keys(this.state.inputs)
     .map(field => user[field] = this.state.inputs[field].value);

...without any form of looping construct at all, then no, there's no way to do that. You'll need some kind of loop.


map isn't the right choice, though, because you're not using its return value. forEach or a for-of loop would be more appropriate choices:

Object.keys(this.state.inputs)
    .forEach(field => user[field] = this.state.inputs[field].value);

or

for (const field of Object.keys(this.state.inputs)) {
    user[field] = this.state.inputs[field].value;
}

You can avoid the second lookup (this.state.iputs[field].value) using Object.entries instead of Object.keys (but it involves a bunch of temporary arrays, so...tradeoffs):

for (const [field, value] of Object.entries(this.state.inputs)) {
    user[field] = value;
}

or with forEach:

Object.entries(this.state.inputs).forEach(([field, value]) => {
    user[field] = value;
});
Sign up to request clarification or add additional context in comments.

2 Comments

I appreciate your time and effort on this question.
@Lasitha - No worries. I've just updated the answer in light of your reply to my comment on the question. :-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.