WEB-js cannot enter the transmission problem when the function passes the object array data

table of Contents

The source of the problem:

The problem encountered when doing WEB development
needs to parse the json data transmitted from a backend, but there is another object in this json array in the form of an object array, when you pass this object array into the js function Error occurs.

Data transmitted to the front end:

[{"lat":"30.162964","lng":"120.272827","name":"萧山区仓库","address":"临浦镇","things":"块石:123.0立方米 ","ckthings":"块石:45067立方米 ","CWList":[{"cknum":"0","clnum":"21","CLlat":"30.070388807312316","CLlng":"120.98680132382566"},{"cknum":"0","clnum":"44","CLlat":"29.665853864273636","CLlng":"120.47346601010386"},{"cknum":"0","clnum":"41","CLlat":"30.35209906273789","CLlng":"121.06390570670683"},{"cknum":"0","clnum":"18","CLlat":"30.18406913403903","CLlng":"120.19047972769886"}]},{"lng":"0000"},{"lat":"30.40418","lng":"120.551627","name":"Jiaxing Management Office Warehouse","address":"Haining Yanguan Guanchao No. 1 Linjiang Road, Scenic Spot","things":"Steel pipe (material): 56.0 tons","ckthings":"Steel pipe (material): 62.636 tons","CWList":[{"cknum":"1", "clnum":"44","CLlat":"29.665853864273636","CLlng":"120.47346601010386"},{"cknum":"1","clnum":"18","CLlat":"30.18406913403903", "CLlng":"120.19047972769886"}]},{"lat":"30.162964","lng":"120.272827","name":"Xiaoshan District Warehouse","address":"Linpu Town","things ":"Hard hat:58.0 top","ckthings":"安全帽:100顶 ","CWList":[{"cknum":"2","clnum":"21","CLlat":"30.070388807312316","CLlng":"120.98680132382566"},{"cknum":"2","clnum":"41","CLlat":"30.35209906273789","CLlng":"121.06390570670683"}]}]

The data marked in red is the data we need to process.

When we transfer this object array CWList to the js custom function in the web page, an error will occur

For example, pass the above CWList into the thelocation() function below, and an error will occur when the function is called

function thelocation(CWList){

    、、、、、、
    、、、、、、

}

The problem that immediately appeared was like this:

Uncaught SyntaxError: Invalid or unexpected token

The reason for analyzing a package is: it contains Chinese character strings or Chinese symbols

Then I thought about it, is it possible to add double quotes directly to the outer layer?

So I added a double quotation mark to the data of CWList (var list="'"+CWList[1]+"'";) and tried it, but the result is obviously a failure. Then it's a crazy Baidu problem, but it's all useless.

Finally, I thought about whether there were special symbols in it that caused it to be blocked when it was passed in. So I searched for escape characters and so on. Sure enough, there are several special characters in my data, which are converted to String type. It’s not possible to enter the function, and then we can achieve our goal by dealing with these special characters.

Ideas to solve the problem

Then I looked for a transcoding method to find a way to solve the problem I encountered (using URI encoding for transmission). First, URI encoding the data with special strings that we need to transmit (that is, the String type The data can be URI encoded, converted to URI format) and then transmitted, and finally decoded in the transmission function. Successfully solved the problem we encountered.

The concrete realization of the idea

The previous analysis is nothing more than an encoding and decoding operation on the character data in CWList, then it becomes very simple

Encode the data into URI format before transmission:

var valueStr = JSON.stringify(CWList);  //对象转字符串
valueStr=encodeURIComponent(valueStr);    //使用uri来传递对象数组的值

Here is a step first to convert the json array into a string, and then use our URI encoding method to achieve the purpose, mainly using the encodeURIComponent(); method

Decode the data into our original format after transmission:

var Str = decodeURIComponent(CWList);//使用URI编码来传递数组的值

This step uses decodeURIComponent(); this method is used to decode the transmitted data

to sum up

When transmitting an object array (data containing certain special characters), an error will occur if it is directly transmitted with the string type, and we need to process it in a special encoding format (we use the URI encoding)

No pains No results