jquery - Looping through external JSON file -
i have json file containing 2 different holiday resorts. compare values within 2 dropdown menus 2 values in json file.
for example, if destination dropdown menu has value "caribbean" selected , comfortleveldropdown has value "4" selected, search through external json file, find resort matching descriptions, , display information matching resorts.
html:
<div class="searchdestination"> <br> <label><b>select destination: </b></label> <select id="destination"> <option value="0">please select:</option> <option value="europe">europe</option> <option value="africa">africa</option> <option value="carribian">the carribian</option> <option value="asia">asia</option> </select> </div> <div class="searchcomfortlevel"> <br> <label><b>select comfort level: </b></label> <select id="comfortlevel"> <option value="0">please select:</option> <option value="3">three star</option> <option value="4">four star</option> <option value="5">five star</option>> </select> </div> <div id="buttons"> <button id="reset" class="button-error pure-button" style="color:white">reset</button> <button id="search" class="button-success pure-button" style="margin-left:5px; color:white">search</button> </div> javascript:
$( "#search" ).click(function() { var destination = $('option:selected', "#destination").attr('value'); var comfortlevel = $('option:selected', "#comfortlevel").attr('value'); $.getjson('resort.json', function (data) { $.each(resorts, function(i, v) { if (v.destination == "carribian") { alert(v.destination); } }); }); }); resort.json
{ "resort": [ { "id":"resort1", "destination":"carribean", "name":"les boucaniers", "location":"martinique", "comfortlevel": "4", "activities":["water skiing", "tennis", "scuba diving", "kitesurf", "spa"], "price":1254, "startdate":"2016-01-01", "enddate":"2016-12-31", "short_description":"the resort of les boucaniers located on laid-back beach-covered south coast of island, , placed martinique holidays both relaxing , awe-inspiring.", "picture":"images/resort1pic1small.jpg", "long_description":"a divers' paradise in baie du marin, legendary spot.<br>its bungalows discreetly lodged in tropical garden beside white sand beach in superb marin bay. magical site can enjoy taste of everything, alone or family or friends. try water sports , magnificent club med spa*. you'll enchanted exotic flavours of local cuisine , joyful spirit of caribbean.", "url":"resorts/resort1.html" }, { "id":"resort2", "destination":"indian ocean", "name":"la plantation d'albion", "location":"mauritius", "comfortlevel": "5", "activities":["kids club","golf", "scuba diving", "flying trapeze", "tennis", "sailing", "spa"], "price":2062, "startdate":"2016-01-01", "enddate":"2016-12-31", "short_description":"beautifully located in 1 of last remote creeks on island, la plantation d'albion club med welcomes demanding of guests world of supreme refinement.", "picture":"images/resort2pic1small.jpg", "long_description":"in remote beauty spot, savour luxury of mauritian lifestyle. <br> idyllic natural setting enhanced sublime decor designed marc hertrich , nicolas adnet, , resort's top-end comfort reflected in beautifully spacious rooms. exceptional cinq mondes spa* , luxurious overflow pool add ideally zen touch.<br> resort entirely devoted fulfilling guests' desires , offers discreet, personal service in swimming areas, bars , 'table gourmet' restaurants.", "url":"resorts/resort2.html" } ]}
you're looping through wrong data:
$( "#search" ).click(function() { var destination = $('option:selected', "#destination").attr('value'); var comfortlevel = $('option:selected', "#comfortlevel").attr('value'); $.getjson('resort.json', function (data) { $.each(data.resort, function(i, v) { // <-- line changed if (v.destination == "caribbean") { // <-- fixed typo alert(v.destination); } }); }); }); note: sure return json says "resort" not "resorts"? if that's case update line accordingly.
Comments
Post a Comment