I am working on a document list with a filter menu to pair down the listing via query strings. I want to display all current query values in a designated div, which I have working. The problem that I have now is that I have each category individually coded in the JS, which causes an "undefined" value to display if there is no query for that category.
I want to display ONLY the values that are represented in the query. I have been trying to create an array, but my JS is spotty at best and this has been kludged-together from multiple sources. Any suggestions? Here is my current js:
function getQueryVariable(variable)
{
try{
q = location.search.substring(1);
v = q.split("&");
for( var i = 0; i < v.length; i++ ){
p = v[i].split("=");
if( p[0] == variable ){
if( p[1].indexOf('_') != -1 ){
n = [];
for( var j = 0; j < p[1].split('_').length; j++ ){
n.push(p[1].split('_')[j]);
}
str = "";
for( var k = 0; k < n.length; k++ ){
str += n[k] + ' ';
}
return str.trim();
}
else{
return p[1];
}
}
}
}
catch (e){
console.log(e);
}
}
if(document.location.search.length) {
// query string exists
$p( "div#filterContainer" ).html(
"<div class='litType'><ul class='ct-list'><li class='ct-list-elem'>"
+getQueryVariable('application')
+"</li>"+
"<li class='ct-list-elem'>"
+getQueryVariable('year')
+"</li>"+
"<li class='ct-list-elem'>"
+getQueryVariable('industry')+
"</li>"+
"<li class='ct-list-elem'>"
+getQueryVariable('literature_type')
+
"</li></ul></div>" );
} else {
// no query string exists
$p( "div#filterContainer" ).html(
"No filters are being applied." );
}