SoFunction
Updated on 2025-03-01

Detailed explanation of how js/jquery parses json and array format

Before parsing, we must figure out several concepts: what are the differences and contact points between arrays, associative arrays and json?

1. Concept introduction
1.Array

grammar:
ECMAScript v3 specifies the syntax for direct array quantities, which JavaScript 1.2 and JScript 3.0 implement. You can place a comma-separated list of expressions in square brackets to create and initialize an array. The values ​​of these expressions will become array elements. For example:

var a = [1, true, 'abc'];

Check the API for specific operations.

ps: Must be separated by square brackets.

2. Associate array

1. Syntax:
var myhash= {”key1″:”val1″, “key2″:”val2″ };//obj


myhash= {key1:"val1″, key2:"val2″ };//obj-It is also OK

ps: The format is almost the same as json, but the json format requires more stringent (the key-value pairs inside must use double quotes), but json can only be used as a format standard. If you want to operate it, you must convert it into an associative array object (obj).

2. Simple operation
1. Add key value to the Hash associative array

// Add a new key newkey, the key value is newval

myhash[”newkey”] = “newval”;

2. Delete the Hash associative array already has key values

// Delete a key newkey, and at the same time, the newval corresponding to the key value will disappear
delete myhash[”newkey”];

3. Iterate through the Hash associative array

// Iterate through the entire hash array
for (key in myhash) {
val = myhash[key];
}

4. Obtain the value

Way.key1
Way.key2


Format requirements:

{"key1":"val1", "key2":"val2" };//Strictly follow this format, operations can be followed by the associated array operation

2. Several key points in front-end and back-end interaction
1. When the data sent by the server is not a single json, but multiple jsons, you should contact the array and the associative array to assemble the string.
For example: var objs = [{ id: 1, name: 'n_1' }, { id: 2, name: 'n_2'}];

2. The data given to the client from beginning to end is just a string. Therefore, in order to enable it to perform necessary operations on it in js, it can be converted into a js executable object through eval().
Therefore, the $.parseJSON() provided in jQuey is limited. If it is the case mentioned in 1 above, you must use eval() to convert it, and then operate it through $.each(objs,function(i,o){...})

3. Specific example code
Page code:

Copy the codeThe code is as follows:

<body>
 <input type="button" value="send ajax json" onclick="sendAjaxByjson();"/>
 <input type="button" value="send ajax array" onclick="sendAjaxByarray();"/>
</body>
 <script type="text/javascript">
  function sendAjaxByjson(){
   $.post("json",{},function(data){
    var obj=data;
    alert(typeof obj);//string
//var a=eval(obj); If you don't understand and don't comment, you will report an error..
    var strToobj=$.parseJSON(obj);
    alert();
    alert(typeof strToobj)//obj
    var obja={'name':'techbirds','age':'23','sex':'male'};
    alert(typeof obja);//obj
    alert(obja['name']+":"+);
    delete obja['name'];
   });
  }
  function sendAjaxByarray(){
   $.post("array",{},function(data){
    var str=data;
    alert(typeof str);//string
    alert(typeof eval(str));//object
    var obja=[1,2,3,4,5];
    alert(typeof obja);//object

   });
  }
 </script>

Background code:
Copy the codeThe code is as follows:

@Override
 protected void service(HttpServletRequest req, HttpServletResponse reps)
   throws ServletException, IOException {
  Map<String, Object> jsonMap=new HashMap<String, Object>();
  ("name", "techbirds");
  ("age", 23);
  ("sex", "male");
  ().print((jsonMap).toString());
  ().flush();
  ().close();

 }

Copy the codeThe code is as follows:

 @Override
 protected void service(HttpServletRequest req, HttpServletResponse reps)
   throws ServletException, IOException {
  String array="[1,2,3,4,5,6]";
  ().print(array);
  ().flush();
  ().close();

 }