Добавление ключа объекта и значения в 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, поскольку она доступна только для того, чтобы мы могли протестировать этот код.

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

Написание кода для спокойна легко, но, чтобы получить полный соков, я рекомендую использовать эту крошечную библиотеку:

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

я написал мой собственный код для создания и уничтожения строки запроса, но я переключился на этот, поскольку он дает полный дождь лук.

Использование

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'