sweetalert2 inputoptions from file in select example

问题

In Sweetalert2 select example:

swal({
  title: 'Select Ukraine',
  input: 'select',
  inputOptions: {
    'SRB': 'Serbia',
    'UKR': 'Ukraine',
    'HRV': 'Croatia'
  },
  inputPlaceholder: 'Select country',
  showCancelButton: true,
  inputValidator: function (value) {
    return new Promise(function (resolve, reject) {
      if (value === 'UKR') {
        resolve()
      } else {
        reject('You need to select Ukraine :)')
      }
    })
  }
}).then(function (result) {
  swal({
    type: 'success',
    html: 'You selected: ' + result
  })
})

a key value struct is used to populate the items to select. Is there any way to do it from a local file?

My particular case: I'm developing a website that perform some actions and uses some info that comes from a DB. It will be really easy to me, to create a json file that have this struct:

[{
    "tag1": "tag1",
    "tag2": "tag2",
    "tag3": "tag3"
}]

Where tag[i] could be any kind of string that will not follow that tag[i] struct.

In this question I've found that this can be performed using a Promise:

var inputOptionsPromise = new Promise(function (resolve) {
        setTimeout(function () {
            resolve({
                //place options here
            })
        }, 2000)
    })

    $(function(){
        $("#taginfo").click(function(){
            console.log("click on tag info");
            swal({
            title: 'Select Tag',
            input: 'select',
            inputOptions: inputOptionsPromise,
            inputPlaceholder: 'Select tag',
            showCancelButton: true,
            inputValidator: function (value) {
                return new Promise(function (resolve, reject) {
                  if (value != '') {
                    document.getElementById('taginfo').value = value;
                    resolve();
                  }else {
                      reject('You need to select one tag')
                  }
                })
            }
            }).then(function (result) {
                swal({
                    type: 'success',
                    html: 'You selected: ' + result
                })
            })
        });
    });

But I don't know how to load the json file (located under /public/resources/tags.json) into inputOptionsPromise resolve function.

回答1:

Check getjson form jquery. I am using myjson to create demo for this

var inputOptionsPromise = new Promise(function(resolve) {
  // get your data and pass it to resolve()
  setTimeout(function() {

    $.getJSON("https://api.myjson.com/bins/10dvr9", function(data) {
      resolve(data)
    });

  }, 2000)
})



$(function() {
  $("#taginfo").click(function() {
    console.log("click on tag info");
    swal({
      title: 'Select Tag',
      input: 'select',
      inputOptions: inputOptionsPromise,
      inputPlaceholder: 'Select tag',
      showCancelButton: true,
      inputValidator: function(value) {
        return new Promise(function(resolve, reject) {
          if (value != '') {
            document.getElementById('taginfo').value = value;
            resolve();
          } else {
            reject('You need to select one tag')
          }
        })
      }
    }).then(function(result) {
      swal({
        type: 'success',
        html: 'You selected: ' + result
      })
    })
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/sweetalert2/5.3.5/sweetalert2.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/sweetalert2/5.3.5/sweetalert2.js"></script>

<button id="taginfo">Show Sweet Alert</button>

Please comment If some doubt

来源：https://stackoverflow.com/questions/46522519/sweetalert2-inputoptions-from-file-in-select-example

标签

javascript

json

sweetalert

sweetalert2