从jQuery数组生成查询字符串,其中包含查询var的多个值

时间:2019-06-27 15:13:54

标签: javascript jquery arrays

我编写了以下代码,该代码接受一个数组并将其转换为过滤器字符串,将生成该字符串,而不是

product_size=123&product_size=456

我希望这个名字是product_size=123+456

我怀疑我需要检查product_size的数组键是否已经存在,然后将第二个数字推入其中,然后生成过滤器字符串。

我创建了一个keysAlreadyUsed数组,但是我不知道该怎么做。

也许我正在考虑这个问题,并且某种形式的字符串操作就足够了。

 // Array

    arrayTest = [];
    arrayTest.push( ['product_size', 123] );
    arrayTest.push( ['product_size', 456] );
    arrayTest.push( ['product_color', 123] );

    // Start filter string and array of keys already used

    filterString = '';
    keysAlreadyUsed = [];

    // Loop the array test

    $.each( arrayTest, function( index1, value1 ) {

    	// If the key has already been set
      
      if( jQuery.inArray( value1[0], keysAlreadyUsed ) ) {
      
      	// Push into the existing array key

      } else {
      
      	// New array we can loop through later with the product_size and the 123, 456 in it.

      }
      
      // Populate filter string
      
      filterString += value1[0] + '=' + value1[1] + '&';
      
      // Push the key already used into the keys already used array
      
      keysAlreadyUsed.push( value1[0] );

    });

    // Output

    console.log(filterString);
    console.log(keysAlreadyUsed);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jsFiddle: https://jsfiddle.net/6oxc8umz/2/

2 个答案:

答案 0 :(得分:2)

也许不是最有效的。

函数reduce的第一次调用用于创建key-value对象,第二次调用用于生成queryString。

let arrayTest = [['product_size', 123], ['product_size', 456] ,['product_color', 123]],
    result = Object.entries(arrayTest.reduce((a, [key, value]) => {
      if (a[key]) a[key] += `+${String(value)}`;
      else a[key] = value;
      return a;
    }, Object.create(null))).reduce((a, [key, value]) => a + `${key}=${value}&`, "").slice(0, -1);

console.log(result);

答案 1 :(得分:2)

首先,我将数组变成一个对象,以便您可以将键关联到串联的值。因为您使用的是jQuery,所以可以根据需要使用$.param对其进行格式化。

const arrayTest = [['product_size', 123],['product_size', 456],['product_color', 123]];

const toFilterString = obj => decodeURIComponent($.param(obj));

let params = arrayTest.reduce((output, [key,value]) => {
  if (output[key]) output[key] += `+${value}`;       //if key exists, concatenate value
  else (output[key]) = value;                        //else, set value
  return output;
}, {});
  
console.log(toFilterString(params));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如果您需要将该值进行URL编码,则可以删除decodeURIComponent(...)