javascript - 创建动态价格范围（不是滑块）答案

【问题标题】：javascript - creating dynamic price ranges (not slider)javascript - 创建动态价格范围（不是滑块）
【发布时间】：2014-12-16 20:15:04
【问题描述】：

我有以下对象列表，例如，作为数据源：

var data = [
{"id": 456, "name": "ngf", "price": 9},
{"id": 576, "name": "ghdf", "price": 14},
{"id": 756, "name": "dtdf", "price": 16},
{"id": 743, "name": "fsd", "price": 19},
{"id": 354, "name": "gf", "price": 28},
{"id": 678, "name": "hjmd", "price": 42},
{"id": 783, "name": "fgh", "price": 55},
{"id": 345, "name": "gdv", "price": 60},
{"id": 785, "name": "ghj", "price": 67},
{"id": 869, "name": "hd", "price": 87},
{"id": 234, "name": "hgf", "price": 95}
]

（该列表故意按对象的价格值排序，因为这就是我的代码中真实的样子）

此列表实际上代表页面上显示的产品的数据源。现在，我需要创建动态价格范围以过滤此列表以进行显示，方法如下：

最高 $10
$11 - 30
$31 - $50
> $50

这些范围在这里不是任意的，而是专门基于当前对象列表（产品，正如我已经提到的）中的价格值。尽管如此，这只是一个示例，在我网站上的真实代码中，这个列表是动态的，价格可以在一个非常宽的整体范围内变化（例如，它可以从 0.5 美元到 1,000 美元）。甚至此列表中的产品数量也是动态的。唯一不是动态的就是总是有 4 个价格范围，其中第一个是“upto x”，最后一个是“above y”。

我需要编写一个 javascript 代码来获取此列表及其动态价格并创建适当的范围。

请注意，我已经有了某种算法（将列表从低到高排序，获取平均值，获取每个价格占产品总量的百分比，等等），但我无法在 JS 代码中实现它。这就是为什么我在这里要求提供有效的 JavaScript 代码，而不仅仅是逻辑或理论想法。

提前谢谢你。

【问题讨论】：

您也需要定义一个增量。 10 美元或 100 美元或 1 美元
我不确定我理解你的意思。能详细点吗？
如果您的 delta 为 10，那么您的范围为 1-10 和 9、11-20 和 14、16、19、21-29 和 28，依此类推。如果您有 50 的 delta，则您有 0-49 和 9、14、16、119、24、42 等等。在您的示例中，您的起始增量为 20，然后是 30，然后是其余的
首先提醒大家，价格是动态的，不是预设的。每次加载页面时，列表中的所有项目都可能有不同的价格。就此而言，即使列表中的项目数量也是动态的。我需要在每次页面加载时进行此计算，并具有适当的 4 价格范围以涵盖整个价格范围（从当前集合中的最低价到最高价）。这就是问题的本质——我如何在 JavaScript 中以编程方式做到这一点？
好的 - 您的示例是否是实际范围并不明显。由于 SO 不是 e-lancing.com，请向我们展示您的尝试并提出具体问题，如 help center 中所述 - 我不介意编写自定义代码，但我收费。

标签： javascript arrays sorting object filter

【解决方案1】：

哦，好吧。我觉得很有趣，所以这里有一个解决方案

FIDDLE

var data = [
{"id": 456, "name": "ngf", "price": 9},
{"id": 576, "name": "ghdf", "price": 14},
{"id": 756, "name": "dtdf", "price": 16},
{"id": 743, "name": "fsd", "price": 19},
{"id": 354, "name": "gf", "price": 28},
{"id": 678, "name": "hjmd", "price": 42},
{"id": 783, "name": "fgh", "price": 55},
{"id": 345, "name": "gdv", "price": 60},
{"id": 785, "name": "ghj", "price": 67},
{"id": 869, "name": "hd", "price": 87},
{"id": 234, "name": "hgf", "price": 95}
], 
    ranges = [0,10,30,50,Number.MAX_VALUE],
    buckets = {},
    numBuckets=ranges.length-1;

// create the object to hold the ranges
for (var i=0;i<ranges.length-1;i++) {
    buckets["bucket"+i]= {limit: [ranges[i],ranges[i+1]],bucket: []};
}    
// fill the buckets
for (var i = 0; i < data.length; i++) {
    for (var b in buckets) {
        var bucket = buckets[b], price = data[i].price; 
        if (price > bucket.limit[0] && price<= bucket.limit[1]) {
            bucket.bucket.push(data[i]);
        }
    }
}
// access the data again and display it
for (var i=0;i<numBuckets;i++) {
    var data = buckets["bucket"+i];
    console.log(i,data);
    for (var j=0;j<data.bucket.length;j++) {
        console.log(j,data.bucket)
        document.getElementById("range"+i).innerHTML+=data.bucket[j].name+":"+data.bucket[j].price+"<br>";
    }
    document.getElementById("range"+i).innerHTML+='<hr/>';
}

Up to $10
<div id="range0"></div>
$11 - 30
<div id="range1"></div>
$31 - $50
<div id="range2"></div>
> $50
<div id="range3"></div>

【讨论】：