使用 JQuery UI 滑块选择字段后从 JSON 获取数据答案

【问题标题】：Obtain data from JSon after choosing a field with a JQuery UI slider使用 JQuery UI 滑块选择字段后从 JSON 获取数据
【发布时间】：2023-04-08 07:24:01
【问题描述】：

我正在做一个包含 JQuery UI 滑块的网页，您可以在其中选择一年。在滑块停止事件之后，我希望网页显示与我选择的年份相关的 JSon 文件中的数据。首先，我想知道这样做是否可行（我使用的是 HTML + CSS + JavaScript）。

其次，这里是滑块的停止事件：

    stop: function (event, ui) {
        alert('Stopped at ' + ui.value);            

        $.getJSON('winners.json', function(winners) {
            var output=" ";

            output+=winners.driver[ui.value].name;
            document.getElementById("winner").innerHTML=output;
        });
    }

警报正确显示在滑块中选择的年份。

winners.json 有 2 个字段（年份、名称），driver 是 JSon 数组的名称，winners 是 HTML 中的占位符

【问题讨论】：

“我想知道这是否可行” 是的。您的代码有任何问题吗？
对不起，我忘记提出问题了：）它显示警报没有问题，但网页没有显示名称字段。
Have a look at the console and see if you get any errors。如果它没有显示名称，那么要么您的数据结构与您想象的不同，要么无法解析响应。关于它，我们无话可说，因为我们既不知道winner 的真正结构，也不知道ui.value 是什么。
我会尝试使用控制台，谢谢。 ui.value 是滑块中实际选择的值。获胜者是我要显示名称的 html 中的标签。我认为该标签应该以这种方式工作，因为它的编码类似于此处jqueryui.com/resources/demos/slider/rangemax.html 中的示例
控制台显示“XMLHttpRequest 无法加载文件”，所以我会先尝试解决这个问题。感谢控制台提示。

标签： javascript html json jquery-ui slider

【解决方案1】：

根据您对winners.json 的描述，听起来您有一个名为driver 的对象，其中包含一个数组。数组中的每个对象都有两个字段：year 和 name。然后，您尝试访问 name 字段，就像它嵌套在 year 字段中一样......而不是作为 year 字段的兄弟。如果是这种情况，您要么需要重组 winners.json 文件以匹配您的代码，或者更简单...更改您的代码以正确访问 name。

如果他们是兄弟姐妹，你可以这样做：

for (var i=0,len=winners.driver.length; i < len; i++) {
    if(winners.driver[i].year === ui.value){
        output += winners.driver[i].name;
    }
}

另外，请确保winners.json 文件已上传到您的网络服务器，并且您在拨打电话时指定了正确的路径。根据您所拥有的，它将在与您进行调用的 HTML 文件相同的目录中查找。

【讨论】：