Javascript - Sweetalert - Adding values to Select List

Question

I am using SweetAlert2, and have a Select List. My challenge is that the values in the select list are added programmatically. While my code runs, the dropdown has the right NUMBER of values, the text says [object Object] rather than what I added. What am I doing wrong? Code is below.

     var outputStr = [];     

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

     // If here, we have data, so show the information....    
       var vREGISTRY_ID                = data.rows[i].REGISTRY_ID               ? data.rows[i].REGISTRY_ID                  : '-';
       var vNN_NAME                    = data.rows[i].NN_NAME                   ? data.rows[i].NN_NAME                      : '-';
       var vACCOUNT_NAME               = data.rows[i].ACCOUNT_NAME              ? data.rows[i].ACCOUNT_NAME                 : '-';
       var vSITE_DUNS_9DIG             = data.rows[i].SITE_DUNS_9DIG            ? data.rows[i].SITE_DUNS_9DIG               : '-';           
       var vPRIMARY_CITY               = data.rows[i].PRIMARY_CITY              ? data.rows[i].PRIMARY_CITY                 : '-';
       var vPRIMARY_STATE_PROVINCE     = data.rows[i].PRIMARY_STATE_PROVINCE    ? data.rows[i].PRIMARY_STATE_PROVINCE       : '-';

         outputStr.push({
             value:vREGISTRY_ID,
             label: vACCOUNT_NAME
         }) ;


      }; // end of FOR loop

       swal({
       title: 'Select Account Name or Division',
       input: 'select',
       inputOptions:  outputStr ,
       inputPlaceholder: 'Select from dropdown',
       showCancelButton: true,
       inputValidator: function(value) {
       return new Promise(function(resolve, reject) {
        if (value === 'abc') {
       resolve();
       } else {
        reject('You need to select abc :)');
       }
     });
     }
    }).then(function(result) {
    swal({
    type: 'success',
       html: 'You selected: ' + result
    });
  })

score 4 · Accepted Answer · answered Aug 12 '16 at 18:51

You have to add dynamical properties to the JavaScript object

Like this: data[propertyName] = propertyValue;

    var inputOptions = {}; // Define like this!

  // Instead of sample variables,
  // your data handling here

  var vREGISTRY_ID = "500";
  var vACCOUNT_NAME = "Peter";

   
       
       // Add the Variables like this
       // This will create '500' : 'Peter',
       inputOptions[vREGISTRY_ID] = vACCOUNT_NAME;
       inputOptions["455"] = "Martin";  
       
       // Note that the options will get sorted by their value

      swal({
        title: 'Select Account Name or Division',
        input: 'select',
        inputOptions: inputOptions,
        inputPlaceholder: 'Select from dropdown',
        showCancelButton: true,
        inputValidator: function(value) {
          return new Promise(function(resolve, reject) {
            if (value == "500") {
              resolve();
            } else {
              reject('You need to select Peter :)');
            }
          });
        }
      }).then(function(result) {
        swal({
          type: 'success',
          html: 'You selected: ' + result
        });
      })

<link href="https://cdn.jsdelivr.net/sweetalert2/4.1.5/sweetalert2.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/sweetalert2/4.1.5/sweetalert2.js"></script>

This is SOOOO close to what I want. Anyway to add the data without having it automatically sort? I want the data in a specific order, which is how I am adding it....(from a JSON data set) — user1009073, Aug 12 '16 at 19:59
It's Chrome which orders the Objects by Properties.... try converting the number to string... if this doesn't work you could try using `Map()`, which guarantees key order. For more information about the Chrome "Bug", see https://bugs.chromium.org/p/v8/issues/detail?id=164 — , Aug 12 '16 at 20:06
Using Firefox, not Google, but anyway... I just prefixed a 3 digit counter to the beginning of the values and data is now shown in the order I want. Thanks so much! — user1009073, Aug 12 '16 at 20:20

score 0 · Answer 2 · answered Jul 18 '18 at 11:40

0

Let's say your 'data' is the response from an Api call and you can change the response format.Then, you can return a dictionary of this form Dictionary<int,string> and bind directly the response: inputOptions: data.

answered Jul 18 '18 at 11:40

Andrei

270
1
5
12

Javascript - Sweetalert - Adding values to Select List

2 Answers2