选择带有JQuery UI滑块的字段后，从JSon获取数据 [英] Obtain data from JSon after choosing a field with a JQuery UI slider

问题描述

我正在做一个包含JQuery UI滑块的网页，您可以在其中选择一年。在滑块停止事件之后，我希望网页显示与我选择的年份相关的JSon文件中的数据。
首先，我想知道是否可以做到这一点dinamically是可能的（我使用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有两个字段（year，name），driver是JSon数组的名称，而winner是HTML中的占位符

winners.json 的描述中，听起来你有一个名为 driver的对象 / code>包含一个数组。数组中的每个对象都有两个字段： year 和 name 。然后，您尝试访问名称字段，就好像它嵌套在年份字段中，而不是是年份字段的兄弟。如果是这种情况，您需要重构您的 winners.json 文件以匹配您的代码，或者更容易...更改您的代码以访问姓正确。

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

  for（var i = 0，len = winners.driver.length; i< len; i ++）{
 if（winners.driver [i] .year = == ui.value）{
 output + = winners.driver [i] .name; 
 
 
 $ / code> 

另外，请确保 winners.json 文件已上传到您的Web服务器，并且您在拨打电话时指定了正确的路径。根据您的具体情况，它将查找与您拨打电话的HTML文件位于同一个目录中。

I'm doing a webpage that contains a JQuery UI slider, where you can select a year. After the stop event of the slider, I want the webpage to show the data from a JSon file related to the year I have chosen. First, I would like to know if doing this dinamically is possible (I'm using HTML + CSS + JavaScript).

And second, here is the stop event of the slider:

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

The alert shows properly the year selected in the slider.

winners.json has 2 fields (year, name), driver is the name of the JSon Array and winner is a placeholder in the HTML

解决方案

From your description of winners.json, it sounds like you have an object named driver that contains an array. Each object in the array has two fields: year and name. Then, you are trying to access the name field as if it was nested within the year field...instead of being a sibling of the year field. If this is the case, you either need to restructure your winners.json file to match your code, or easier...change your code to access the name correctly.

If they are siblings, you could do something like this:

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

Also, make sure that the winners.json file is uploaded to your web server, and you are specifying the correct path when you make your call. Based on what you have, it would be looking in the same directory as your HTML file that's making the call.

这篇关于选择带有JQuery UI滑块的字段后，从JSon获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！