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, Mar 24 '16 at 02:48

score 2 · Accepted Answer · edited May 23 '17 at 10:28

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 '17 at 10:28

Community

1
1

answered Mar 24 '16 at 03:16

ProllyGeek

15,517
9
53
72

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`? – DRB Mar 24 '16 at 03:23
@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 :) – ProllyGeek Mar 24 '16 at 03:29
Yes! Thank you for that. This makes perfect sense, thanks again. – DRB Mar 24 '16 at 03:34
@DRBC glad to help, please mark answer as correct if you find it helpful. Thank You :) – ProllyGeek Mar 24 '16 at 03:38

score 1 · Answer 2 · answered Mar 24 '16 at 02:56

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>

score 0 · Answer 3 · answered Mar 24 '16 at 02:54

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>

score -1 · Answer 4 · answered Mar 24 '16 at 03:22

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.

Using Select Value to Change Objects Properties

4 Answers4