0

我目前有一个外部 JSON 文件 data.json，我想知道如何不调用这个外部文件，而是将数据存储在 html 代码中。

此代码的目的是用于动态下拉列表。

这是我在 data.json 中的 JSON 数据

{
    "beverages": "Coffee,Coke",
    "snacks": "Chips,Cookies"
}

这是我的 JQUERY

    $("#first-choice").change(function() {

    var $dropdown = $(this);

    $.getJSON("jsondata/data.json", function(data) {

        var key = $dropdown.val();
        var vals = [];

        switch(key) {
            case 'beverages':
                vals = data.beverages.split(",");
                break;
            case 'snacks':
                vals = data.snacks.split(",");
                break;
            case 'base':
                vals = ['Please choose from above'];
        }

        var $secondChoice = $("#second-choice");
        $secondChoice.empty();
        $.each(vals, function(index, value) {
            $secondChoice.append("<option>" + value + "</option>");
        });
    });
});

因此，我希望将数据存储在那里，而不是使用 .getJSON 来调用外部文件。然后我需要如何更改以下代码？

4

4 回答 4

2

只需将此 JSON ( JavaScript Object Notation ) 分配给变量并稍后使用该 var：

var data = {
    "beverages": "Coffee,Coke",
    "snacks": "Chips,Cookies"
}

您的最终代码将是：

$("#first-choice").change(function() {
    var $dropdown = $(this);
    var data = {
        "beverages": "Coffee,Coke",
        "snacks": "Chips,Cookies"
    }
    var key = $dropdown.val();
    var vals = [];

    switch(key) {
        case 'beverages':
            vals = data.beverages.split(",");
            break;
        case 'snacks':
            vals = data.snacks.split(",");
            break;
        case 'base':
            vals = ['Please choose from above'];
    }

    var $secondChoice = $("#second-choice");
    $secondChoice.empty();

    $.each(vals, function(index, value) {
        $secondChoice.append("<option>" + value + "</option>");
    });
});
于 2019-01-09T12:01:59.757 回答
1

为什么不内联变量而不是从文件中加载？

修改后的脚本

$(function() {

// Hide 2nd dropdown on document.ready
$('#second-choice').hide();

$("#first-choice").change(function() {

		var $dropdown = $(this);

		// Inlined variable instead of making a AJAX request to read it from a file!
		const data = {
		  "beverages": "Coffee,Coke",
		  "snacks": "Chips,Cookies"
		};

		var key = $dropdown.val();
		var vals = [];

		switch (key) {
		  case 'beverages':
			vals = data.beverages.split(",");
			break;
		  case 'snacks':
			vals = data.snacks.split(",");
			break;
		  case 'base':
			vals = ['Please choose from above'];
		}

		var $secondChoice = $("#second-choice");
		$secondChoice.empty();
		$.each(vals, function(index, value) {
		  $secondChoice.append("<option>" + value + "</option>");
		});
    // Show 2nd dropdown now
    $('#second-choice').show();
	});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="first-choice">
  <option selected disabled>----Please select an option----</option>
  <option value="beverages">Beverages</option>
  <option value="snacks">Snacks</option>
</select>

<select id="second-choice">
</select>

于 2019-01-09T12:12:56.527 回答
1

如果您的 Javascript 位于内联脚本标记中，而不是在外部页面中，只需将 JSON 粘贴到变量中：

const data = {
  "beverages": "Coffee,Coke",
  "snacks": "Chips,Cookies"
};
$("#first-choice").change(function() {
  var $dropdown = $(this);
  var key = $dropdown.val();
  // etc

但是内联 Javascript 有点不优雅，每次请求页面时都需要通过网络发送更多数据 - 将 JS 存储在可以缓存的外部文件中通常是个好主意。

如果这就是你正在做的事情（或者如果这就是你想要做的事情），如果你的 Javascript 链接到src脚本标签中，那么你将不得不使用另一种方法。一种是将 JSON 放在一个<script>标签中，而type 另一个标签被解析为 Javascript（以确保它不会尝试运行并遇到脚本错误）：例如，您可以使用type="application/json"，然后选择标签，然后解析它textContent：

const json = document.querySelector('#data').textContent;
const data = JSON.parse(json);
// etc
console.log(data);
<script type="application/json" id="data">
{
  "beverages": "Coffee,Coke",
  "snacks": "Chips,Cookies"
}
</script>

第三种选择是将其存储在标签的data-属性中，而不是标签的属性中textContent：

const json = document.querySelector('[data-json]').dataset.json;
const data = JSON.parse(json);
// etc
console.log(data);
<script
  src="linkToYourJs"
  data-json='{"beverages": "Coffee,Coke","snacks": "Chips,Cookies"}'
></script>

于 2019-01-09T12:03:54.983 回答
0

好吧，按照您的描述进行操作可能并不理想。用数据混淆 HTML 并不是最漂亮的解决方案。也就是说，解决方案是将 JSON 存储为 JS 对象：

<script>
data = {"myjson": "here"};
</script>

然后在您的脚本中，一切都保持不变，只是您不再将代码包装在 AJAX 请求中。

于 2019-01-09T12:02:37.373 回答