JS组JSON结构方法

具体需求为获取网页表格内的数据，并将这些数据组成json结构发送给web服务器。

1.json与字符串的互转

(1)json转字符串：
var str= JSON.stringify(jsonObj);
(2)字符串转json：
let jData = eval(’(’ + str+ ‘)’);

2.json结构组织

(1)空的json添加键值对
let obj = {};

            obj.mainDeviceId     = cells[4].childNodes["0"].value;
            obj.deviceName       = cells[0].innerHTML;
            obj.devicePsrId      = cells[1].innerHTML;
            obj.deviceType       = cells[2].innerHTML;
            obj.deviceRunDevName = cells[2].innerHTML;

obj ：
{
"deviceName ":“bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb”,
“devicePsrId”:“222” ,
“devicePsrId”:“aa” ,
“devicePsrId”:“222” ,
“devicePsrId”:“2”
}

(2)json添加json数组
由{“cmdType”:3}转变为
//省略了deviceList部分子节点
{“cmdType”:3,“deviceList”:[{“deviceName”:“bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb”,“devicePsrId”:“222”,“deviceType”:“aa”,“deviceRunDevName”:“222”,“mainDeviceId”:“2”},{“deviceName”:“ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc”,“devicePsrId”:“333”,“deviceType”:“aa”,“deviceRunDevName”:“333”,“mainDeviceId”:“3”}]}
见js接口代码

function CfgSave()
{
    let sndBuf = {"cmdType":0x03};
    //获取上图中表格
    var table = document.getElementById('robotMappingTable');
    var rows = table.rows;
 
    for(var i = 1; i < rows.length; i++)
    {   
        //--循环所有的行
        var cells = rows[i].cells;
        let obj = {};
        for(var j = 0; j < cells.length; j++)
        {   
            //--循环所有的列
            if(j == 4)
            {
                obj.mainDeviceId = cells[j].childNodes["0"].value;
            }
            else if(j == 0)
            {
                obj.deviceName = cells[j].innerHTML;
            }
            else if(j == 1)
            {
                obj.devicePsrId = cells[j].innerHTML;
            }
            else if(j == 2)
            {
                obj.deviceType = cells[j].innerHTML;
            }
            else if(j == 3)
            {
                obj.deviceRunDevName = cells[j].innerHTML;
            }
        }
        var last = JSON.stringify(obj);
        console.log(last)
        //添加名为deviceList的json数组obj至sndBuf。
        sndBuf.deviceList = (sndBuf.deviceList || []).concat(obj);
    }

    last = JSON.stringify(sndBuf);
    console.log(last)

    sinkNodeMsgSend(sndBuf);
}

注：sndBuf.deviceList = (sndBuf.deviceList || []).concat(obj);
该行中的obj可以改成任意json结构，例如
sndBuf.deviceList = (sndBuf.deviceList || []).concat({{“deviceName”:cells[0].innerHTML});
则生成的json结构为
{“cmdType”:3,
“deviceList”:[{“deviceName”:“bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb”},{“deviceName”:“ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc”}]
}

3.json结构解析

仍以上图为例，从web服务器获取json结构，并填入页面的表格中
//省略了deviceList部分子节点
{“cmdType”:3,“deviceList”:[{“deviceName”:“bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb”,“devicePsrId”:“222”,“deviceType”:“aa”,“deviceRunDevName”:“222”,“mainDeviceId”:“2”},{“deviceName”:“ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc”,“devicePsrId”:“333”,“deviceType”:“aa”,“deviceRunDevName”:“333”,“mainDeviceId”:“3”}]}

直接上代码

function robotMappingRspRcv(data)
{
    if(data["cmdType"] == 0x03)
    {
        //展示deviceList数据至页面
        var table = document.getElementById('robotMappingTable');
        var vPosWidth="20%";
        for(i = 0; i < data["deviceList"].length; i++)
        {
            var row = document.createElement('tr');
            row.dbFlag = false;

            var cell = document.createElement('td');
            cell.style.width="30%";
            cell.innerHTML=data["deviceList"][i]["deviceName"];
            row.appendChild(cell);

            cell = document.createElement('td');
            cell.style.width="10%"; 
            cell.innerHTML = data["deviceList"][i]["devicePsrId"];
            row.appendChild(cell);

            cell = document.createElement('td');
            cell.style.width="10%"; 
            cell.innerHTML = data["deviceList"][i]["deviceType"];
            row.appendChild(cell);

            cell = document.createElement('td');
            cell.style.width=vPosWidth; 
            cell.innerHTML = data["deviceList"][i]["deviceRunDevName"];
            row.appendChild(cell);

            cell = document.createElement('td');
            var input = document.createElement("input");
            cell.id = "maindeviceid"
            cell.style.width=vPosWidth; 
            input.type = 'text';
            input.value = data["deviceList"][i]["mainDeviceId"];
            input.style.width="100%"; 
            cell.appendChild(input);
            row.appendChild(cell);
            table.appendChild(row);
        }
    else
    {
        alert("cmdType error");
    }
}