javascript - 选择示例中来自文件的 sweetalert2 inputoptions

Question

在 Sweetalert2 中选择例子:

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
  })
})

键值结构用于填充要选择的项目。有什么办法可以从本地文件做到这一点？

我的特殊情况:我正在开发一个执行某些操作并使用来自数据库的一些信息的网站。创建一个具有此结构的 json 文件对我来说真的很容易:

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

其中 tag[i] 可以是不遵循该 tag[i] 结构的任何类型的字符串。

在this question我发现这可以使用 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
                })
            })
        });
    });

但是我不知道如何将json文件(位于/public/resources/tags.json下)加载到inputOptionsPromise解析函数中。

Answer 1

检查 getjson形成 jquery。我正在使用 myjson为此创建演示

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>

如有疑问请评论