我正在为搜索构建过滤器。一切都工作正常,因为我们一次只允许1个过滤器。所以我得到这样的回报:
var returnVal = "&filterName=filterProperty"
var filterFields = returnVal.split(['=']);
var filterCategory = filterFields[0];
var filterCatSplit = filterCategory.substr(1);
var filterTitle = filterFields[1];
<h4>filter title</h4>
<ul>
<li>filter one</li>
</ul>
我只是得到returnVal并将其拆分为&#39; =&#39;
现在我们要允许多个值,而且我不确定如何将它们全部放到页面中。现在,returnVal看起来像这样:
var returnVal = "&sizeFilterName=filterProperty,filterPropery&colorFilterName=filterProperty,filterProperty"
我现在需要这样返回(或类似的东西)
<h4>Size Filter Name</h4>
<ul>
<li>Size Filter One</li>
<li>Size Filter Two etc</li>
</ul>
<h4>Color Filter Name</h4>
<ul>
<li>Color Filter One</li>
<li>Color Filter Two etc</li>
</ul>
我以前从来没有必要拆分这么多变种。我有点迷路了。我希望这足以让我了解我想要做的事情。
谢谢!
答案 0 :(得分:1)
您可以使用返回的数组将returnVal
传递给URLSearchParams()
然后.split()
","
执行任务
let returnVal = "&sizeFilterName=filterProperty,filterPropery&colorFilterName=filterProperty,filterProperty";
let params = Array.from([...new URLSearchParams(returnVal)]
, ([key, value]) => [key, value.split(",").filter(Boolean)]);
// do stuff with `params`
params.forEach(([key, value]) =>
document.body.insertAdjacentHTML("beforeend", `<h4>Size ${key}</h4>
<ul>
${value.map(prop => `<li>Color ${prop}</li>`).join("")}
</ul>`)
);
&#13;