Use of JSON in qml files

Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right

---

foreword

In the qml file code, it is indispensable to use JSON objects to process various strings or Json objects. This article briefly summarizes the common functions of JSON

---

1. Generation of Json objects

1.1 Parse from a string, with the help of the function JSON.parse(text[, reviver])

JSON.parse(text, [reviver])

JSON.parse parses from top to bottom, from inside to outside

para1 : text is the string to be parsed
para2 : reviver is an optional function parameter, a callback function, which can operate on each item of the JSON string

    function test_parse()
    {
    
    
        var jsonStr= "{\"k1\":\"v1\",\"k2\":\"v2\",\"o2\":{\"ok1\":\"ov1\"},\"ak1\":[\"av1\",\"av2\"]}"
        var json = JSON.parse(jsonStr)
        console.log(json)
    }

output:qml: [object Object]

	function test_parse2()
    {
    
    
        var jsonStr="{\"k1\":\"v1\",\"k2\":\"v2\",\"o2\":{\"ok1\":\"ov1\"},\"ak1\":[\"av1\",\"av2\"]}";
        var json=JSON.parse(jsonStr,printJson);
        console.log(json)
    }

    function printJson(k,v){
    
    
            console.log("k: "+k);
            console.log("v: "+v);
    }

Output: Not sure why printJsonqml: [object Object]
is not executed ? ? ?

1.2 Directly through assignment

 	function test_json()
    {
    
    
        var json={
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"ak1":["av1","av2","aqv3"]}
        console.log(json)
    }

qml: [object Object]

2. Stringification of Json objects

JSON.stringify(value, [replacer], [space])

para1 : the json object whose value needs to be converted,
para2 : the replacer can be passed into a function or an array
para3 : space formatted output parameter, which can be a number or other characters.

2.1 Only pass in value

var json ={
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"]}
var jsonStr=JSON.stringify(json)
console.log(jsonStr)

//输出如下:
/*
qml: {"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
*/

2.2 use of replacer

The function receives the key and value of the json sub-object, and the return value will modify the value of the json sub-object; when undefined is returned, the stringification of the corresponding sub-object will be skipped. PS The original json object will not be modified

varvar json ={
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"]}
//返回 undefined 会忽略对应子对象的字符串化,PS 'return'等同于 'return undefined'
//返回其他值 会在字符串化时替换掉对应子对象的值
jsonStr=JSON.stringify(json,function(k,v){
    
    
            if(k==="k2"){
    
    //忽略对 k2子对象的字符串化
                return undefined
								//return //和return undefined等价
						}
						if(k==="ok1"){
    
    //替换初始化的值
                return "change value"
						}
            return v
        })
console.log(jsonStr)
jsonStr=JSON.stringify(json)//原 json不会被改变
console.log(jsonStr)

//输出如下:
/*
qml: {"k1":"v1","o1":{"ok1":"change value"},"a1":["av1","av2"]}
qml: {"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
*/

2.3 space use

The essence is to wrap a new line before each object, and fill in the formatting characters according to the space; when it is a number, the formatting character is the number of " " specified by the space, and if it is other characters, directly fill in the specified character. The formatting character to fill
in It is relative to the previous level, relative to the previous level of the previous level, formatting characters will be inserted twice

```cpp
var json ={
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"]}
var jsonStr=JSON.stringify(json,null,1)
console.log("1 space:\n",jsonStr)
jsonStr=JSON.stringify(json,null,4)
console.log("4 space:\n",jsonStr)
jsonStr=JSON.stringify(json,null,'\t')
console.log("\\t:\n",jsonStr)
jsonStr=JSON.stringify(json,null,"format")
console.log("some str:\n",jsonStr)

//The output is as follows:

/*
qml: 1 space:
 {
    
    
 "k1": "v1",
 "k2": "v2",
 "o1": {
    
    
  "ok1": "ov1"
 },
 "a1": [
  "av1",
  "av2"
 ]
}
qml: 4 space:
 {
    
    
    "k1": "v1",
    "k2": "v2",
    "o1": {
    
    
        "ok1": "ov1"
    },
    "a1": [
        "av1",
        "av2"
    ]
}
qml: \t:
 {
    
    
	"k1": "v1",
	"k2": "v2",
	"o1": {
    
    
		"ok1": "ov1"
	},
	"a1": [
		"av1",
		"av2"
	]
}
qml: some str:
 {
    
    
format"k1": "v1",
format"k2": "v2",
format"o1": {
    
    
formatformat"ok1": "ov1"
format},
format"a1": [
formatformat"av1",
formatformat"av2"
format]
}
*/

3 Operations on Json sub-objects

3.1 Access the child object and get the value of the child object

3.1.1 The way to use subscripts, that is, to use the "[]" operator

Just enter the key value of the sub-object directly in "[]", the general object key value is a string, and the array is an array index

var json ={
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"]}
console.log("k2 :",json["k2"]);
console.log("o1 :",json["o1"]);//直接返回 对象 {"ok1":"ov1"}
console.log("ok1 :",json["o1"]["ok1"]);
console.log("a1 :",json["a1"]);//直接返回 数组 ["av1","av2"]
console.log("av1 :",json["a1"][0]);

//The output is as follows:

/*
qml: k2 : v2
qml: o1 : [object Object]
qml: ok1 : ov2
qml: a1 : [av1,av2]
qml: av1 : av1
*/

3.1.2 Use the "." operator to access

Just enter the key value of the sub-object directly in "[]", the general object key value is a string, and the array is an array index

var json ={
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov2"},"a1":["av1","av2"]}
console.log("k2 :",json.k2);
console.log("o1 :",json.o1);//直接返回 对象 {"ok1":"ov1"}
console.log("ok1 :",json.o1.ok1);
console.log("a1 :",json.a1);//直接返回 数组 ["av1","av2"]
console.log("av1 :",json.a1[0]);//数组内元素不能直接以".0"方式访问

//The output is as follows:

/*
qml: k2 : v2
qml: o1 : [object Object]
qml: ok1 : ov2
qml: a1 : [av1,av2]
qml: av1 : av1
*/

3.2. Modify the value of an existing child object

Modify the value of the sub-object, which is consistent with the method of acquisition, just use the object as an lvalue

3.2.1 The way to use subscripts, that is, use the "[]" operator

Just enter the key value of the sub-object directly in "[]". The key value of the general object is a string, and the array index is the array index, and then directly assign the value with the equal sign

var json ={
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"]}
json["k2"]="new v2";
console.log("change k2 :",JSON.stringify(json));
json["o1"]["ok1"]="new ov1";
console.log("change ok1 :",JSON.stringify(json));
json["o1"]="new o1"
console.log("change o1 :",JSON.stringify(json));
json["a1"][0]="new av1"
console.log("change av1 :",JSON.stringify(json));
json["a1"]="new a1"
console.log("change a1 :",JSON.stringify(json));

//The output is as follows:

/*
qml: change k2 : {
    
    "k1":"v1","k2":"new v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"]}
qml: change ok1 : {
    
    "k1":"v1","k2":"new v2","o1":{
    
    "ok1":"new ov1"},"a1":["av1","av2"]}
qml: change o1 : {
    
    "k1":"v1","k2":"new v2","o1":"new o1","a1":["av1","av2"]}
qml: change av1 : {
    
    "k1":"v1","k2":"new v2","o1":"new o1","a1":["new av1","av2"]}
qml: change a1 : {
    
    "k1":"v1","k2":"new v2","o1":"new o1","a1":"new a1"}
*/

3.2.2 Using the "." operator

Just enter the key value of the sub-object directly in "[]", the general object key value is a string, and the array is an array index

var json ={
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"]}
json.k2="new v2";
console.log("change k2 :",JSON.stringify(json));
json.o1.ok1="new ov1";
console.log("change ok1 :",JSON.stringify(json));
json.o1="new o1"
console.log("change o1 :",JSON.stringify(json));
json.a1[0]="new av1"//数组内元素不能直接以".0"方式访问
console.log("change av1 :",JSON.stringify(json));
json.a1="new a1"
console.log("change a1 :",JSON.stringify(json));

//The output is as follows:

/*
qml: change k2 : {
    
    "k1":"v1","k2":"new v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"]}
qml: change ok1 : {
    
    "k1":"v1","k2":"new v2","o1":{
    
    "ok1":"new ov1"},"a1":["av1","av2"]}
qml: change o1 : {
    
    "k1":"v1","k2":"new v2","o1":"new o1","a1":["av1","av2"]}
qml: change av1 : {
    
    "k1":"v1","k2":"new v2","o1":"new o1","a1":["new av1","av2"]}
qml: change a1 : {
    
    "k1":"v1","k2":"new v2","o1":"new o1","a1":"new a1"}
*/

3.3. New sub-object

The value of the new sub-object is the same as the modification method, but the assigned object does not exist originally

3.3.1 The way to use subscripts, that is, to use the "[]" operator

Just enter the key value of the sub-object directly in "[]". The key value of the general object is a string, and the array index is the array index, and then directly assign the value with the equal sign

var json ={
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"]}
json["k3"]="v3";
console.log("add k3 :",JSON.stringify(json));
json["o2"]={
    
    "ok1":"ov1"};
console.log("add o2 :",JSON.stringify(json));
json["a2"]=["av1","av2"]
console.log("add a1 :",JSON.stringify(json));
json["a1"][2]="av3"
console.log("add av3 :",JSON.stringify(json));

//The output is as follows:

/*
qml: add k3 : {
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"],"k3":"v3"}
qml: add o2 : {
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"],"k3":"v3","o2":{
    
    "ok1":"ov1"}}
qml: add a1 : {
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"],"k3":"v3","o2":{
    
    "ok1":"ov1"},"a2":["av1","av2"]}
qml: add av3 : {
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2","av3"],"k3":"v3","o2":{
    
    "ok1":"ov1"},"a2":["av1","av2"]}
*/

3.3.2 Using the "." operator

Just enter the key value of the sub-object directly in "[]", the general object key value is a string, and the array is an array index

var json ={
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"]}
json.k3="v3";
console.log("add k3 :",JSON.stringify(json));
json.o2={
    
    "ok1":"ov1"};
console.log("add o2 :",JSON.stringify(json));
json.a2=["av1","av2"]
console.log("add a1 :",JSON.stringify(json));
json.a1[2]="av3"
console.log("add av3 :",JSON.stringify(json));

//The output is as follows:

/*
qml: add k3 : {
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"],"k3":"v3"}
qml: add o2 : {
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"],"k3":"v3","o2":{
    
    "ok1":"ov1"}}
qml: add a1 : {
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"],"k3":"v3","o2":{
    
    "ok1":"ov1"},"a2":["av1","av2"]}
qml: add av3 : {
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2","av3"],"k3":"v3","o2":{
    
    "ok1":"ov1"},"a2":["av1","av2"]}
*/

3.4. Delete existing child objects

There are two ways to delete the value of a child object

3.4.1 Assign the value of undefined to the object to be deleted. The operation method is consistent with the method of modifying the value of an existing sub-object. See 3.2 for details

//删除示例,只举一个,操作方式和修改已有子对象的值方法一致.详见三.2
var json ={
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"]}
json.k1=undefined
console.log(JSON.stringify(json))

//The output is as follows:

/*
qml: {
    
    "k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"]}
*/

3.4.2 Use delete to directly delete the object to be deleted. The specific operation is to add delete before the statement to access the object.

//删除示例,只举一个,其他只要把delete 后的替换成其他访问对象语法就好
var json ={
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"]}
delete json.k1
console.log(JSON.stringify(json))

//The output is as follows:

/*
qml: {
    
    "k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"]}
*/

3.4.3 Deletion of objects in the json array

The deletion of objects in the json array is actually consistent with other deletion methods, but there is one more step. In general, the deletion of objects in the json array is consistent with the deletion of a single array in qml

var json ={
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"]}
json.a1[0]=undefined;
console.log(JSON.stringify(json))
json.a1.splice(0,1)//0指开始索引,1指删除数量
console.log(JSON.stringify(json))

//The output is as follows:

/*
qml: {
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":[null,"av2"]}
qml: {
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av2"]}
*/

//You can also call splice directly

var json ={
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av1","av2"]}
json.a1.splice(0,1)
console.log(JSON.stringify(json))

//The output is as follows:

/*
qml: {
    
    "k1":"v1","k2":"v2","o1":{
    
    "ok1":"ov1"},"a1":["av2"]}
*/

Summarize

Commonly used methods are basically these.