Using Select Value to Change Objects Properties

Question

Let's say I have three objects foo,bar, and baz with different properties. When I change a select option with those values, how would I assign the foo object to contain all the properties of the object, and not just the value.

From my example you'll see that I have it logging foo, but it is setting it to the value, not as properties of an object.

JSFiddle Example

HTML

<select name="objects" id="objects">
  <option value="foo">Foo</option>
  <option value="bar">Bar</option>
  <option value="baz">Baz</option>
</select>

JavaScript

var foo = {
  color: "red",
  height: 12
};

var bar = {
  color: "blue",
  height: 10
};

var baz = {
  color: "green",
  height: 5
};

$('#objects').on('change', function (e) {
    var foo = $(this).val();
    console.log($(this).val());
});

Also, is there anyway to trigger this select event, if they select the option that's already selected? So if foo is selected, and they select foo again, trigger the change function.

@mmativ I want foo to inherif the properties of bar or baz when the appropriate option is selected. — DRB
– DRB, Commented Mar 24, 2016 at 2:48

Community · Accepted Answer · 2017-05-23 10:28:32Z

2

The best solution to this is to create a parent wrapper object that should contain all of your objects, and access the object itself using bracket notation.

var objectsWrap=
{
 foo : {
  color: "red",
  height: 12
   },

 bar : {
  color: "blue",
  height: 10
   },

var baz : {
  color: "green",
  height: 5
   }
}

$('#objects').on('change', function (e) {
    var foo = objectsWrap[$(this).val()];
    console.log(foo);
});

After all the select value is a string and must be evaluated to object reference, and using eval is not recommended at all

Update:

to do a deep clone and ignore duplicates you can simply use for in to iterate object keys, then do a simple check if object already has this property, if yes ignore it, else assign as new property using dot notation

I hope the algorithm is clear, and doesn't require an example.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Mar 24, 2016 at 3:16

ProllyGeek

15.9k9 gold badges56 silver badges77 bronze badges

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

4 Comments

DRB Over a year ago

This solution works well, and makes a lot of sense for what I was looking for. My only question is, what if bar and baz don't contain certain properties? Is there a way to leave the current properties of foo and only override the ones that exist in bar and baz?

ProllyGeek Over a year ago

@DRBC yes ofcourse, check update, and let me know if you need a code snippet, usually I prefer explaining algorithm rather than writing typical snippets, it helps user to get to know more resources :)

DRB Over a year ago

Yes! Thank you for that. This makes perfect sense, thanks again.

ProllyGeek Over a year ago

@DRBC glad to help, please mark answer as correct if you find it helpful. Thank You :)

Rayon · Accepted Answer · 2016-03-24 02:56:07Z

You should have object holding various elements than variable. Use [](bracket) notation to get the value of a key as key is a variable.

Try this:

var foo = {
  color: "red",
  height: 12
};

var bar = {
  color: "blue",
  height: 10
};

var baz = {
  color: "green",
  height: 5
};

var myObj = {
  foo: foo,
  bar: bar,
  baz: baz
};

$('#objects').on('change', function(e) {
  var val = $(this).val();
  alert(JSON.stringify(myObj[val]));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select name="objects" id="objects">
  <option value="foo">Foo</option>
  <option value="bar">Bar</option>
  <option value="baz">Baz</option>
</select>

Or variable are global(keys of window), you can access it using window[KEY]

Try this:

var foo = {
  color: "red",
  height: 12
};

var bar = {
  color: "blue",
  height: 10
};

var baz = {
  color: "green",
  height: 5
};

$('#objects').on('change', function(e) {
  var val = $(this).val();
  alert(JSON.stringify(window[val]));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select name="objects" id="objects">
  <option value="foo">Foo</option>
  <option value="bar">Bar</option>
  <option value="baz">Baz</option>
</select>

mmativ · Accepted Answer · 2016-03-24 02:54:18Z

0

try to approach like this.

$('#objects').on('change', function (e) {
    var foo = $(this).val();
    var color = $(this).find(':selected').data('color')
    var height = $(this).find(':selected').data('height')
    console.log(color);
    console.log(height);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="objects" id="objects">
  <option disabled selected value> -- select an option -- </option>
  <option value="foo" data-color="red" data-height="12">Foo</option>
  <option value="bar" data-color="blue" data-height="10">Bar</option>
  <option value="baz" data-color="green" data-height="5">Baz</option>
</select>

answered Mar 24, 2016 at 2:54

mmativ

1,41415 silver badges26 bronze badges

Comments

danieluy · Accepted Answer · 2016-03-24 03:22:28Z

-1

Try this:

var definitions = {
   foo : {
      color: "red",
      height: 12
   },
   bar : {
      color: "blue",
      height: 10
   },
   baz : {
      color: "green",
      height: 5
   }
}

$('#objects').on('click', function (e) {
   var val = JSON.stringify(definitions[$(this).val()]);
   console.log(val);
});

Note: changing the event from "change" to "click" fires it every time you select something.

answered Mar 24, 2016 at 3:22

danieluy

1391 silver badge4 bronze badges

Collectives™ on Stack Overflow

Using Select Value to Change Objects Properties

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related