Question

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

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
＆GT; $ 50

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

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

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

提前谢谢。

Answer 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>

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

1 个答案: