2 Replies Latest reply on Oct 15, 2019 8:07 AM by Duncan Mills-Oracle

    oj-select-one - store additional information

    Chad Boom

      We populate most of our select one components from services.  Many times, we need to store additional information on the select one other than the label and value so it can be used in on value changed events.  Is there a good way to do this?  One approach we've taken is to populate the select one options array and at the same time, populate a separate array with data from the service.  We then do a .find when a value change event is triggered.

       

      In the below example, we are creating an array for the options, and then populating a separate array for later use.  It would be nice to be able to store more information on the select one option value.

       

      self.assignedUsers = ko.observableArray([]);

       

      userService.userList(app.userSessionId(),

                      function(model) {

                          var users = model.get('userList');

                          var inputArray = [];

                          if (users) {

                              for (var i = 0; i < users.length; i++) {

                                  inputArray.push({value: users[i].USER_ID,

                                      label: users[i].USERNAME + ' - ' + users[i].FIRST_NAME + ' ' + users[i].LAST_NAME});

                              }

                          }

       

       

                          //Assign values to proper array

                          self.assignedUsers(inputArray);

                      });

       

      var userOption = self.assignedUsers().find(function(user) {

                      return user.value === userId;

                  });

        • 1. Re: oj-select-one - store additional information
          Daniel Merchán

          Hi Chad,

           

          You can keep a separate collection to store extra data.

           

          For example if you store as values ['CH','FX','IE'] and you select 'CH' you can have another variable which is a ko.computed based on the selection and choose an element from your extended catalog of values like:

           

          const browsers = [{

               name: "Chrome",

               value: "CH",

               ...

          }]

           

          Kind regards.

          • 2. Re: oj-select-one - store additional information
            Duncan Mills-Oracle

            The value property of oj-select-one is actually specified as any so you can in principle (I think) have the corresponding oj-option value as being an object not a simple string or number value and therefore assign the additional payload information into that object.  The one downside is that the value of the select as a whole now becomes the selected object so you will probably need a computed to tease out the actual bit of that object value to use for the primary purpose. So I'm not sure if that's any better than the side array / object lookup approach....