Czy istnieje prosty sposób utworzenia tabeli wyszukiwania javascript?

Question

Szukam prostego sposobu sprawdzania wartości, używając javascript, w odniesieniu do wielu wymiarów:

np. (Mam zamiar używać produktów i opcji produktu do opisania tego, dane pochodzące z bazy danych w bardzo podobnej formie)

Colour Size Price 

Blue S £45 

Blue L £98 

Red  S £65 

Red  L £31 

Więc wtedy szereg rozwijanego menu na stronie

Colour: Blue, Red 

Size: Small, Large 

Więc - Chcę wiedzieć ... dane „Niebieski + Small”, co cena jest

nie mam pojęcia jakiej kolejności Dropdowns są lub kolejność, w której kolor i rozmiar są pobierane z baza danych

Dane w JavaScripcie może być tablicą tak:

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

Jest to surowy przykład, ale nie mogę pracować w łatwy sposób do osiągnięcia tego celu w javascript.

Answer 1

To może być?

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 

Answer 2

Najpopularniejszym rozwiązaniem jest po prostu zapętlenie tablicy, w stylu 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); 
    } 
} 

Rozumowanie za brute zmusza to, że jeśli masz zestaw danych, który jest wystarczająco duży, aby wymagać lepszego algorytmu to istnieje duża szansa, że ​​najlepiej byłoby po prostu wysłać zapytanie do serwera i mieć bazę danych do wykonania ciężkiej pracy dla ciebie.

Aby uzyskać pełniejszy przykład, można sprawdzić this code z zestawu narzędzi Dojo.

Answer 3

Możesz indeksować ceny w mapie dwuwymiarowej przy ładowaniu strony (z działającym fiddle).

1) kładę wybrać wartości w odnośników stoły w przypadku trzeba je wczytywać:

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

2) Oto tabela cen w postaci tablicy:

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) Inicjowanie (wybiera zapełnianych wartości i 'zmiany' Event):

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) indeksowania stołu cena:

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 (w wybranych zmian):

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) debugowanie (hit F12 w Chrome czy Firefox, aby otworzyć konsolę zobaczyć).

Pełna indeksowanej tabeli:

console.log(map); 

Tylko cena 'Blue' & 'małe':

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