URLにオブジェクトのキーと値を追加するクエリ

Question

URLクエリ文字列を更新する関数があります。いくつかのシナリオでは、私は単一のキーと配列の値を持っていますが、値の配列を持つ複数のキーを持つ場合、クエリ文字列に追加しませんが、オブジェクトを見るとキーとその値を見ることができます。私の関数である

function Querystring(obj) { 
var querystring = ""; 
// Build the query string 
var currentQueryString = parseQueryString(); 
var newQueryString = ""; 
var dataCategory = Object.keys(obj)[0]; 
console.log(dataCategory); 
// Set the new value 
if (obj[dataCategory] != null) { 
    currentQueryString[dataCategory] = obj[dataCategory].join(","); 
    // Loop the keys in currentQueryString and contruct new querystring 
    Object.keys(currentQueryString).forEach(function (key, index) { 
     if (index == 0) { 
      newQueryString += "?" + key + "=" + currentQueryString[key]; 
     } else { 
      newQueryString += "&" + key + "=" + currentQueryString[key]; 
     } 
    }); 
} 
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + newQueryString; 

window.history.pushState({ path: newurl }, '', newurl); 

return newQueryString; 

}

次のようこれは、私はあなたがかなり単純に、この事前に

$('.select').change(function() { 
       var SortOrder = $(this).attr("id"); 
       var SortBy = $(this).data("sortby"); 
       var obj = {}; 
       obj[SortOrder] = $(this).val(); 
       obj[SortBy] = [$('option:selected', this).data("price")]; 
       Querystring(obj); 
      }); 

おかげ

Answer 1

この関数を呼び出すことができています方法です。以下の例を試してみてください。 getParser関数を無視してください。私たちがこのコードをテストできるようにするだけです。

https://www.npmjs.com/package/query-string

私が書いた：それは簡単に静かですが、完全なジュースを得るために、私はこの小さなライブラリを使用することをお勧めするために

function getParser(url) { 
 
    var a = document.createElement("a"); 
 
    a.href = url; 
 
    return a; 
 
} 
 

 
function getUpdatedURL(url, newQueryParams) { 
 
    var searchParams = url.search.substring(1).split("&"); 
 
    var obj = {}; 
 
    searchParams.forEach(function(param){ 
 
    var paramParts = param.split("="); 
 
    obj[paramParts[0]] = paramParts[1]; 
 
    }); 
 
    obj = Object.assign(obj, newQueryParams); 
 
    url.search = "?"+Object.keys(obj).map(p => p+"="+obj[p]).join("&"); 
 
    return url.href; 
 
} 
 

 
var url = getParser("http://example.com/test/page?blah=abc&test=123"); 
 

 
//Ignore this as this is just for us to be able to test and run this example. You'll pass in the window.location instead of the url variable defined here. 
 
console.log(getUpdatedURL(url, { sortOrder: "1345", sortBy: ["price","other","more"] }));

Answer 2

コードの記述クエリ文字列をビルドして破棄するための私のコードですが、完全な雨が降るとこれに切り替わりました弓。

使用

const queryString = require('query-string'); 

console.log(location.search); 
//=> '?foo=bar' 

const parsed = queryString.parse(location.search); 
console.log(parsed); 
//=> {foo: 'bar'} 

console.log(location.hash); 
//=> '#token=bada55cafe' 

const parsedHash = queryString.parse(location.hash); 
console.log(parsedHash); 
//=> {token: 'bada55cafe'} 

parsed.foo = 'unicorn'; 
parsed.ilike = 'pizza'; 

const stringified = queryString.stringify(parsed); 
//=> 'foo=unicorn&ilike=pizza' 

location.search = stringified; 
// note that `location.search` automatically prepends a question mark 
console.log(location.search); 
//=> '?foo=unicorn&ilike=pizza'