0

Okay so I have a JSON and I have a table populated by that JSON. I want to be able to filter by category (which I can already do using a dropdown menu). The tricky part is, I want to be able to change the URL and have the correct filter show up.

For example:

'http://myexample.com/timerPage.html' would take someone straight to the main page, no filtering.

'http://myexample.com/timerPage.html?filter=booklet' would take someone to the filtered page that shows only the booklets.

Also, when I click on the dropdown menu and go to "Booklet" then it changes the URL to 'http://myexample.com/timerPage.html?filter=booklet'

So basically I just want to be able to change the URL and have it affect which dropdown item is displayed and run the code for it. Is this possible to do?? Here is the code I have so far:

JSON SNIPPET

[
{
    "daily_percentile_90th": 32603,
    "daily_average": 26045.4,
    "timerName": "Booklet:Landscape"
},
{
    "daily_percentile_90th": 32603,
    "daily_average": 26045.4,
    "timerName": "Booklet:Horizon"
},
{
    "daily_percentile_90th": 9198.3,
    "daily_average": 5563.67,
    "timerName": "Search:DownloadImage"
},
{
    "daily_percentile_90th": 3299.9,
    "daily_average": 2867.13,
    "timerName": "Search:Results"
}
]

HTML

<select id="dropdown" onclick="filter(this);">
   <option value="all" href="all" selected>All</option>
   <option value="booklet" href="booklet">Booklet</option>
   <option value="search" href="search">Search</option>
</select>

JAVASCRIPT

/*******************************************************************
        THIS GRABS THE FILTER AND CHANGES THE URL
*******************************************************************/
window.filter = function(choice){
if(choice.value=="all"){
    window.location.href = "?filter=all";
    clearTable();
    filterAll();
}
else if (choice.value=="booklet"){
    window.location.href = "?filter=booklet";
    bounds = "Booklet";
    clearTable();
    filterByTimerName(bounds);
}
else if(choice.value == "search"){
    window.location.href = "?filter=search";
    bounds = "Search";
    clearTable();
    filterByTimerName(bounds);
}
}


/*******************************************************************
                   THIS DOES THE ACTUAL FILTERING
*******************************************************************/
function filterByTimerName(filter){
$.getJSON('http://myJson.com/latestJson/', function(jsonData){
    var filtered = [];

    for (var i = 0; i < jsonData.length; i++) {
        // if 'timerName' begins with whatever 'filter' is
        if (jsonData[i].timerName.substring(0, filter.length) === filter) {
            filtered.push(jsonData[i]);
        }
    }

    return filtered;
});
}

Thank you in advance for the help!!! :)

Eswizzle
  • 57
  • 1
  • 10
  • whats the part of your code that dont work?? – Vanojx1 Jul 22 '15 at 18:38
  • just can't do that with asynchronous ajax calls...return data before it exists – charlietfl Jul 22 '15 at 18:38
  • @Vanojx1 When I change the URL, it doesn't affect the code displayed at all. As in if I change the filter name to be `?filter=search` when it's on `?filter=booklet`, then it doesn't change the dropdown, and it doesn't run the code for that filter. – Eswizzle Jul 22 '15 at 18:53

0 Answers0