Processing of converting form serialization type data into objects based on JavaScript (allowing objects to contain objects)_javascript skills

The form serialization type data refers to the format of the data passed by the URL, which is a key/value pair in the form of "key=value&key=value&key=value". Generally speaking, this effect can be achieved using jQuery's $.fn.serialize function. How to convert such format into object?

We know that using jQuery’s $.fn.serializeArray function gets an object with the following structure

[
  {
    name: "startTime"
    value: "2015-12-02 00:00:00"
  },
  {
    name: "endTime"
    value: "2015-12-25 23:59:59"
  }
]

This is an object array, but sometimes we want to get an object with the following structure

{
  "startTime": "2015-12-02 00:00:00"
  "endTime": "2015-12-25 23:59:59"
}

So a conversion function is needed here.

The processing steps are as follows:

1. Use "&" to separate each key-value pair and then loop through each key-value pair

  var properties = serializedParams.split("&");
  for (var i = 0; i < properties.length; i++) {
    //处理每一个键值对
    evalThem(properties[i]);
  }; 

2. Split the specified key-value pairs from the "=" symbol, and use decodeURIComponent to parse the uri component encoding for each key and value (because the serialized data passed by the URL is generally encoded by the uri component)

    var strAry = new Array();
    strAry = str.split("=");
    //使用decodeURIComponent解析uri 组件编码
    for(var i = 0; i < strAry.length; i++){
      strAry[i] = decodeURIComponent(strAry[i]);
    }
    var attributeName = strAry[0];
    var attributeValue = strAry[1].trim(); 

3. If the value contains the "=" symbol, additional processing (value merging) is required.                         

 if(strAry.length > 2){
      for(var i = 2;i<strAry.length;i++){
        attributeValue += "="+strAry[i].trim();
      }
    } 

There is a process here, that is, if the value does not exist, it will not be added to the final object. You can choose whether to delete this code or not according to your own situation

   if(!attributeValue){
      return ;
    } 

4. If the key is "obj.obj.obj" linked by a "." symbol, it needs to be treated as an object containing object. The method of processing is to decompose the key through ".", and then check whether the temporary object obj already contains the decomposed object. If so, append the data to the existing object. The source code is as follows

 var attriNames = attributeName.split("."),
      curObj = obj;
    for(var i = 0; i < (attriNames.length - 1); i++){
      curObj[attriNames[i]]&#63;"":(curObj[attriNames[i]] = {});
      curObj = curObj[attriNames[i]];
    }
    curObj[attriNames[i]] = attributeValue.trim(); 

Here we see that the assignment part is handled in this way on the Internet

eval("obj."+attributeName+"=\""+attributeValue.trim()+"\";"); 

This is very problematic. One is that it cannot correctly handle the problem that objects in the 4 objects contain objects (especially when two elements have the same parent object, such as "test.id=1&test.name='chua'") owns the parent object test). The other is that when the value attributeValue contains single quotes or double quotes, it cannot be processed correctly. So using assignment "=" is the safest.

So the final complete source code is as follows

/*
serializedParams格式为"key1=value1&key2=value2". 
也支持'key.sonkey=value' 
 */
function paramString2obj (serializedParams) {  
  var obj={};
  function evalThem (str) {
    var strAry = new Array();
    strAry = str.split("=");
    //使用decodeURIComponent解析uri 组件编码
    for(var i = 0; i < strAry.length; i++){
      strAry[i] = decodeURIComponent(strAry[i]);
    }
    var attributeName = strAry[0];
    var attributeValue = strAry[1].trim();
    //如果值中包含"="符号，需要合并值
    if(strAry.length > 2){
      for(var i = 2;i<strAry.length;i++){
        attributeValue += "="+strAry[i].trim();
      }
    }
    if(!attributeValue){
      return ;
    }
    var attriNames = attributeName.split("."),
      curObj = obj;
    for(var i = 0; i < (attriNames.length - 1); i++){
      curObj[attriNames[i]]&#63;"":(curObj[attriNames[i]] = {});
      curObj = curObj[attriNames[i]];
    }
    //使用赋值方式obj[attributeName] = attributeValue.trim();替换
    //eval("obj."+attributeName+"=\""+attributeValue.trim()+"\";");
    //解决值attributeValue中包含单引号、双引号时无法处理的问题
    curObj[attriNames[i]] = attributeValue.trim();
  };
  var properties = serializedParams.split("&");
  for (var i = 0; i < properties.length; i++) {
    //处理每一个键值对
    evalThem(properties[i]);
  };
  return obj;
}

The above content is based on JavaScript's processing of converting form serialization type data into objects (objects are allowed to contain objects). I hope sharing this article can be helpful to everyone.