Миналата седмица, в сряда, достигнахме половината път за началния лагер. Започнахме да работим и с API. И продължи да работи с JavaScript.

За моя проект исках да използвам LCBO API, за да сортирам каква бира хората трябва да пият на къмпинг въз основа на типа шоколад. Но се натъкнах на няколко проблема с лагерите, които се връщат най-много, те заемат около 80% от резултатите на първата страница. Разбрах как да накарам първите три страници да се заредят, което помогна много, но все пак ми остави 20+ резултата за лагери и 4 за сайдери.

Реших да променя начина, по който планирах да съпоставя видовете шоколад с видовете бира, и избрах съответствие със стойността на стила, а не с типа бира. Но беше форматиран като „едно и две“ за всяка бира. Така че разделих това на три части и изпълних избраното от потребителя срещу обект 0 или обект 2.

for (var i = 0; i < beerApp.preferredStyle.length; i = i + 1){
      if (beerApp.preferredStyle[i] === brokenStyle[2] ||
          beerApp.preferredStyle[i] === brokenStyle[0]){
        return beerResults;
      }
}

Вижте кода в действие:

Но това означаваше, че имам твърде много бутони и все още ограничени резултати за определени селекции. Започнах да се чудя как можете да добавите няколко стойности към един бутон за избор, така че да върне резултати, които съответстват на всяка от опциите.

Това ме накара да се замисля как да направя стойностите на радиобутона свързани с масив от опции, който изглежда така:

if ($("input[name=style]:checked").val() === "one"){
      beerApp.preferredStyle = ["Fruity","Floral"]
} else if ($("input[name=style]:checked").val() === "two") {
      beerApp.preferredStyle = ["Hoppy","Spicy"]
} else if ($("input[name=style]:checked").val() === "three") {
      beerApp.preferredStyle = ["Light"]
} else if ($("input[name=style]:checked").val() === "four") {
      beerApp.preferredStyle = ["Medium"]
} else {
      beerApp.preferredStyle = ["Full","Dark","Roasted"]
}

В зависимост от това кой етикет избира потребителят, моят javascript взема масива, който съответства на тази стойност, преминава през оператора for по-горе и връща всички бири, които съответстват на някой от обектите в масива.

* Имайте предвид, че бутоните не се показват в същия ред на уебсайта, както в моя код, преместих ги, за да съответстват на шоколадовите вкусове от млечен към тъмен, плюс плодов.