การเพิ่ม Column Auto Number ใน Json

วันนี้ผมมานำเสนอวิธีการเพิ่ม Auto Number ให้แก่ Data แบบ Json ที่เราเรียกใช้งาน ผ่าน Ajax กันครับผม ก่อนอื่นผมขอเกริ่นนำสักนิดนึงนะครับ ว่ามันมีที่มาที่ไปอย่างไร สมมุติ ว่าเพื่อนๆ คุ้นเคยกับตัวอย่าง Code ด้านล่างเป็นอย่างดี

    function CallApi(url, async, callBack)
            {
                $.ajax({
                    url: url,
                    type: "GET",
                    data: "{}",
                    contentType: false,
                    cache: false,
                    processData: false,
                    async:async,
                    beforeSend: function (jqXHR, settings) {
                        // console.log(jqXHR.progress)
                    },

                    success: function (msg) {
                        output = msg;
                    
                        return callBack(msg);
                    }
                    , error: function (jqXHR, textStatus, errorThrown) {
                        //fix bug error not set false

                    }
                    , complete: function (jqXHR, textStatus) {

                    }
                });  //.ajax

            }

Code นี้เป็นเพียงการเรียกใช้ Data กับ Web Api แบบง่ายๆ นะครับถ้าใส่ Parameter ได้อย่างถูกต้อง

   success: function (msg) {
                        output = msg;
                    
                        return callBack(msg);
                    }

Data ที่ได้จะ Retrun ผลลัพธ์ใน Success function  ซึ่ง parameter  msg จะเป็นตัวรับผลลัพธ์ที่เราเรียก Web Api หรือ  restful api  ซึ่งโดยทั่วไปค่าที่ได้จะมีหน้าตาประมาณรูปด้านล่างครับ

JSonData

 

แต่ในตัวอบ่างนี้ ผมขอสมมุติว่า เราได้ Data ที่ Return  มามี ชื่อ ความสูงและน้ำหนัก แต่ผมต้องการเพิ่ม Column ลำดับที่ๆ เป็น Auto Number ให้กับข้อมูล ลองดูตัวอย่างด้านล่าง

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <script>

        var msg = {
            "data":
       [
        { "name": "Art", "height": 1.71, "weight": 55 },
        { "name": "Jo", "height": 1.52, "weight": 60 },
        { "name": "Mac", "height": 1.63, "weight": 66 }
       ]

        }

        var temp = msg["data"];
        var autoNumber = 1;
        for (var x in temp) {
            temp[x]["AutoNumber"] = autoNumber;
            autoNumber = autoNumber + 1;
        }

        console.log(msg);  // { "AutoNume":1,"name": "Art", "height": 1.71, "weight": 55 },

    </script>
</head>
<body>
</body>
</html>

ผลลัพธ์ที่ได้คือเราจะได้ Column AutoNumber เพิ่มเข้ามาใน Data ตามรูปด้านล่าง

JsonAutoNumber

หัวข้อนี้มีข้อสังเกตุ อยู่นิดนึงครับว่าทำไมเรา Assign ค่า  var temp = msg[“data”]; ที่เป็นการส่งค่า Data ให้ temp แล้วเราเปลี่ยนค่าใน temp แล้วทำไมค่าของตัว msg ตอนที่ log ออกมาดูแล้วทำไมมันถึงเปลี่ยน สาเหตุก็เนื่องมาจาก Data เป็น Object แบบ Referrence ครับ  (เรื่องนี้เดียวผมจะมาอธิบายต่ออีกทีครับผม)

 

หวังว่าคงมีประโยชน์บ้างนะครับ ^__^