JS 建立一個複雜的Json物件 範例

JS 建立一個複雜的Json物件 範例

Comments 0 Comment

JS 建立一個複雜的Json物件 [JS 產生Json物件陣列] 範例

資料來源: copilot


提問01. 

我有一個JSON 結構
    {
        "command_type":"SET/TEXT/QRCODE",
        "data":"",
        "coordinate_x":0,
        "coordinate_y":0,
        "text_size":0,
        "font_name":"Arial",
        "qr_mul":0,
        "qr_mode":0,
        "qr_type":0,
        "qr_mask":0,
        "qr_deg":0
        "qr_errorlavel":"M"
        "qr_encoding":0
    }
請幫我寫一段JS 裡面有一個變數 var CMD_Value = []; 
該CMD_Value變數 存放 10筆包含上述結構的資料元件

回答01. 

var CMD_Value = [];

for (var i = 0; i < 10; i++) {
    CMD_Value.push({
        "command_type": "SET/TEXT/QRCODE",
        "data": "",
        "coordinate_x": 0,
        "coordinate_y": 0,
        "text_size": 0,
        "font_name": "Arial",
        "qr_mul": 0,
        "qr_mode": 0,
        "qr_type": 0,
        "qr_mask": 0,
        "qr_deg": 0,
        "qr_errorlavel": "M",
        "qr_encoding": 0
    });
}

console.log(CMD_Value);


提問02.如果 我要一筆一筆使用物件的方式新增呢

回答02. 

var CMD_Value = [];

var cmd1 = {
    "command_type": "SET/TEXT/QRCODE",
    "data": "Data1",
    "coordinate_x": 10,
    "coordinate_y": 20,
    "text_size": 12,
    "font_name": "Arial",
    "qr_mul": 2,
    "qr_mode": 1,
    "qr_type": 1,
    "qr_mask": 0,
    "qr_deg": 0,
    "qr_errorlavel": "M",
    "qr_encoding": 1
};

var cmd2 = {
    "command_type": "SET/TEXT/QRCODE",
    "data": "Data2",
    "coordinate_x": 30,
    "coordinate_y": 40,
    "text_size": 14,
    "font_name": "Arial",
    "qr_mul": 2,
    "qr_mode": 1,
    "qr_type": 1,
    "qr_mask": 0,
    "qr_deg": 0,
    "qr_errorlavel": "M",
    "qr_encoding": 1
};

// 按此方式繼續新增其餘的資料元件

CMD_Value.push(cmd1);
CMD_Value.push(cmd2);
// 重複上述步驟以添加更多物件

console.log(CMD_Value);


提問03.如果 我想要每個資料都用其他變數來指定 讓每個cmd 像單一物件來操作呢

回答03. 

var CMD_Value = [];

var commandType = "SET/TEXT/QRCODE";
var data1 = "Data1";
var coordinateX1 = 10;
var coordinateY1 = 20;
var textSize1 = 12;
var fontName = "Arial";
var qrMul1 = 2;
var qrMode1 = 1;
var qrType1 = 1;
var qrMask1 = 0;
var qrDeg1 = 0;
var qrErrorLevel1 = "M";
var qrEncoding1 = 1;

var cmd1 = {
    "command_type": commandType,
    "data": data1,
    "coordinate_x": coordinateX1,
    "coordinate_y": coordinateY1,
    "text_size": textSize1,
    "font_name": fontName,
    "qr_mul": qrMul1,
    "qr_mode": qrMode1,
    "qr_type": qrType1,
    "qr_mask": qrMask1,
    "qr_deg": qrDeg1,
    "qr_errorlavel": qrErrorLevel1,
    "qr_encoding": qrEncoding1
};

// 按此方式創建其餘的資料元件
var data2 = "Data2";
var coordinateX2 = 30;
var coordinateY2 = 40;
var textSize2 = 14;
var qrMul2 = 2;
var qrMode2 = 1;
var qrType2 = 1;
var qrMask2 = 0;
var qrDeg2 = 0;
var qrErrorLevel2 = "M";
var qrEncoding2 = 1;

var cmd2 = {
    "command_type": commandType,
    "data": data2,
    "coordinate_x": coordinateX2,
    "coordinate_y": coordinateY2,
    "text_size": textSize2,
    "font_name": fontName,
    "qr_mul": qrMul2,
    "qr_mode": qrMode2,
    "qr_type": qrType2,
    "qr_mask": qrMask2,
    "qr_deg": qrDeg2,
    "qr_errorlavel": qrErrorLevel2,
    "qr_encoding": qrEncoding2
};

CMD_Value.push(cmd1);
CMD_Value.push(cmd2);
// 重複上述步驟以添加更多物件

console.log(CMD_Value);


提問04.如果每個cmd的子項不一定都有值呢

回答04. 

var CMD_Value = [];

function createCmd(data, coordinateX, coordinateY, textSize, qrMul, qrMode, qrType, qrMask, qrDeg, qrErrorLevel, qrEncoding) {
    var cmd = {
        "command_type": "SET/TEXT/QRCODE",
        "font_name": "Arial" // 假設這個屬性是必須的
    };
    if (data !== undefined) cmd.data = data;
    if (coordinateX !== undefined) cmd.coordinate_x = coordinateX;
    if (coordinateY !== undefined) cmd.coordinate_y = coordinateY;
    if (textSize !== undefined) cmd.text_size = textSize;
    if (qrMul !== undefined) cmd.qr_mul = qrMul;
    if (qrMode !== undefined) cmd.qr_mode = qrMode;
    if (qrType !== undefined) cmd.qr_type = qrType;
    if (qrMask !== undefined) cmd.qr_mask = qrMask;
    if (qrDeg !== undefined) cmd.qr_deg = qrDeg;
    if (qrErrorLevel !== undefined) cmd.qr_errorlavel = qrErrorLevel;
    if (qrEncoding !== undefined) cmd.qr_encoding = qrEncoding;
    
    return cmd;
}

var cmd1 = createCmd("Data1", 10, 20, 12, 2, 1, 1, 0, 0, "M", 1);
var cmd2 = createCmd(undefined, 30, 40, undefined, 2, 1, 1, 0, 0, "M", 1);

// 按此方式創建其餘的資料元件

CMD_Value.push(cmd1);
CMD_Value.push(cmd2);
// 重複上述步驟以添加更多物件

console.log(CMD_Value);

實測最後的回覆確定可以執行並且做事當修改的HTML code 

<!DOCTYPE html>
<html lang="en">
    <head>

    </head>
    <body>

        <script>
            var CMD_Value = [];

            function createCmd(command_type=undefined, data=undefined, coordinate_X=undefined, coordinate_Y=undefined, font_name=undefined, text_Size=undefined, qr_Mul=undefined, qr_Mode=undefined, qr_Type=undefined, qr_Mask=undefined, qr_Deg=undefined, qr_ErrorLevel=undefined, qr_Encoding=undefined) {
                var cmd = {
                    "command_type": "SET",
                    "data": "",
                    "coordinate_x": 0,
                    "coordinate_y": 0,
                    "font_name": "Arial",
                    "text_size":20,
                    "qr_mode":3,
                    "qr_type":2,
                    "qr_qr_errorlevel":"M",
                    "qr_mask":8,
                    "qr_mul":5,
                    "qr_deg":0,
                    "qr_encoding":0
                };
                if (command_type !== undefined) cmd.command_type = command_type;
                if (data !== undefined) cmd.data = data;
                if (coordinate_X !== undefined) cmd.coordinate_x = coordinate_X;
                if (coordinate_Y !== undefined) cmd.coordinate_y = coordinate_Y;
                if (font_name !== undefined) cmd.font_name = font_name;
                if (text_Size !== undefined) cmd.text_size = text_Size;
                if (qr_Mode !== undefined) cmd.qr_mode = qr_Mode;
                if (qr_Type !== undefined) cmd.qr_type = qr_Type;
                if (qr_ErrorLevel !== undefined) cmd.qr_errorlevel = qr_ErrorLevel;
                if (qr_Mask !== undefined) cmd.qr_mask = qr_Mask;
                if (qr_Mul !== undefined) cmd.qr_mul = qr_Mul;    
                if(data.length>70)
                {
                    cmd.qr_mul = 2;
                }
                else if(data.length > 50)
                {
                    cmd.qr_mul = 3;
                }
                else if(data.length > 30)
                {
                    cmd.qr_mul = 4;
                }            
                if (qr_Deg !== undefined) cmd.qr_deg = qr_Deg;
                if (qr_Encoding !== undefined) cmd.qr_encoding = qr_Encoding;
                
                return cmd;
            }

                        //command_type, data, coordinate_X, coordinate_Y, font_name, text_Size, qr_Mul, qr_Mode, qr_Type, qr_Mask, qr_Deg, qr_ErrorLevel, qr_Encoding
            var cmd1 = createCmd(undefined,"^L");
            var cmd2 = createCmd("TEXT","中文測試", 30, 40, undefined, 35);
            var cmd3 = createCmd("QRCODE","20250101-0202-0303-000000000000001111111111222222222222", 100, 200);
            // 按此方式創建其餘的資料元件

            CMD_Value.push(cmd1);
            CMD_Value.push(cmd2);
            CMD_Value.push(cmd3);
            // 重複上述步驟以添加更多物件

            console.log(JSON.stringify(CMD_Value));
    /*
    [
        {
            "command_type": "SET",
            "data": "^L",
            "coordinate_x": 0,
            "coordinate_y": 0,
            "font_name": "Arial",
            "text_size": 20,
            "qr_mode": 3,
            "qr_type": 2,
            "qr_qr_errorlevel": "M",
            "qr_mask": 8,
            "qr_mul": 5,
            "qr_deg": 0,
            "qr_encoding": 0
        },
        {
            "command_type": "TEXT",
            "data": "中文測試",
            "coordinate_x": 30,
            "coordinate_y": 40,
            "font_name": "Arial",
            "text_size": 35,
            "qr_mode": 3,
            "qr_type": 2,
            "qr_qr_errorlevel": "M",
            "qr_mask": 8,
            "qr_mul": 5,
            "qr_deg": 0,
            "qr_encoding": 0
        },
        {
            "command_type": "QRCODE",
            "data": "20250101-0202-0303-000000000000001111111111222222222222",
            "coordinate_x": 100,
            "coordinate_y": 200,
            "font_name": "Arial",
            "text_size": 20,
            "qr_mode": 3,
            "qr_type": 2,
            "qr_qr_errorlevel": "M",
            "qr_mask": 8,
            "qr_mul": 3,
            "qr_deg": 0,
            "qr_encoding": 0
        }
    ]
    */
        </script>

        
    </body>
</html>

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *