有沒有簡單的方法來創建一個javascript查找表？

我正在尋找一種簡單的方法來查找一個值，使用javascript，對多個維度：有沒有簡單的方法來創建一個javascript查找表？

例如。（我要使用的產品和產品選項，以說明這一點，將數據從一個數據庫來在一個非常類似的格式）

Colour Size Price 

Blue S £45 

Blue L £98 

Red  S £65 

Red  L £31

所以我當時在頁面

Colour: Blue, Red 

Size: Small, Large

多項下拉菜單中

所以 - 我想知道......給「藍+小」，什麼價格是

我不知道什麼樣的順序的下拉菜單都在，或者在顏色和大小，從拉訂單數據庫

個JavaScript中的數據可能是這樣的一個數組：

{Colour:Blue, Size:Medium, Price:48},{Colour:Blue, Size:Large, Price:82}

這是一個最原始的例子，但我不能工作了一個簡單的方法在JavaScript實現這一目標。

來源

2012-01-25 Paul

爲什麼jQuery和不簡單的js？只是問... – Yoshi

簡單的js會工作得很好...... :)過了漫長的一天 – Paul

爲什麼你想用jQuery來做到這一點？更簡單的方法是使用多維JavaScript數組。 –

這也許？

var data = { 
    1: { 
    2: { 
     3: 45 
    } 
    }, 
    2: { 
    2: { 
     3: 98 
    } 
    } 
}; 

console.log(data[1][2][3]); // 45 
console.log(data[2][2][3]); // 98 

// or 
var A = 1, B = 2, C = 3; 
console.log(data[A][B][C]); // still 45

來源

2012-01-25 16:25:30 Yoshi

A，B和C的值不是線性的，因此A的值可能爲1,45,89 ......對於此解決方案仍然有效嗎？（這是我考慮過的，但可能會想到我寫的東西） – Paul

@Paul當然是。我只是用對象文字符號來建立一個對象。你可以使用任何你想要的*鍵*。也許你可以添加更多的數據，這樣我們可以更好地理解你想要達到的目標。 – Yoshi

這幾乎是我的數據，每個記錄有3個鍵值對，我試圖通過傳遞3個鍵值對（每列一個）來定位該表中的記錄....我認爲最大的問題我有與列的順序....我不一定知道它，雖然可能可能重新排序我通過 – Paul

最常見的解決方案是循環遍歷數組，O（N）風格。

var filter = {Colour: 'blue', Size:'small'}; 
function matches_filter(filter, item){ 
    //you can also have variations on this function that 
    //allow for functions, regexes or anything you like in the filter... 
    for(var key in filter){ 
     if Object.prototype.hasOwnProperty.call(filter, key){ 
      if(item[key] !== filter[key]){ 
       return false; 
      } 
     } 
    } 
    return true; 
} 

var filtered_items = []; 
for(var i=0; i<items.length; i++){ 
    var item = items[i]; 
    if(matched_filter(filter, item){ 
     filtered_items.push(item); 
    } 
}

的暴力破解背後的原因是，如果你有一個數據集是足夠大，需要一個更好的算法，然後有一個很好的機會，這將是最好只將查詢發送回服務器和有它的數據庫爲你做了很多努力。

有關更完整的示例，可以從Dojo工具包中檢查this code。

來源

2012-01-25 18:11:53 hugomg

您可以在頁面加載時使用二維地圖索引價格（工作fiddle）。

1）我把查對錶中選擇值的情況下，你必須預裝他們：

var tables = { 
    Colour: ["Blue", "Red"], 
    Size: ["Small", 'Medium, "Large"] 
};

2）這是在數組形式的價格表：

var array = [ 
    {Colour: "Blue", Size: "Small", Price: 45}, 
    {Colour: "Blue", Size: "Medium", Price: 48}, 
    {Colour: "Blue", Size: "Large", Price: 98}, 
    {Colour: "Red", Size: "Small", Price: 65}, 
    {Colour: "Red", Size: "Large", Price: 31} 
];

3）初始化選項（填充值和事件'更改'）：

for (var key in tables) 
    if (tables.hasOwnProperty(key)) { 
     selects[key] = form[key]; 
     selects[key].addEventListener("change", updateSpan); 

     var values = tables[key]; 
     len = values.length; 
     for (i = 0; i < len; i++) { 
      var option = document.createElement('option'); 
      option.appendChild(document.createTextNode(values[i])); 
      form[key].appendChild(option); 
     } 
    }

4）爲您的價格表編制索引：

len = array.length; 
for (i = 0; i < len; i++) { 
    var record = array[i]; 

    if (typeof map[record.Colour] === 'undefined') 
     map[record.Colour] = {}; 

    map[record.Colour][record.Size] = record.Price; 
}

5）功能updateSpan（在某些變化）：

function updateSpan() { 
    var Colour = selects.Colour.options[selects.Colour.selectedIndex].value; 
    var Size = selects.Size.options[selects.Size.selectedIndex].value; 

    if (typeof map[Colour] !== 'undefined' && typeof map[Colour][Size] !== 'undefined') 
     span.textContent = map[Colour][Size]; 
    else 
     span.textContent = "Price not defined to Colour: " + Colour + " and Size: " + Size + "."; 
}

6）調試（命中F12在Chrome或Firefox打開控制檯視圖）。

全部索引表：

console.log(map);

就在 '藍' & '小' 的價格：

console.log(map['Blue']['Small']); // outputs: 45

來源

2015-04-29 13:49:22

謝謝。請注意，此行有錯字>>'Medium，<< –

有沒有簡單的方法來創建一個javascript查找表？

回答

相關問題