JavaScript อ่านไฟล์ JSON ด้วยคำสั่ง getJSON

JavaScript อ่านไฟล์ JSON ด้วยคำสั่ง getJSON บทความนี้สอนใช้คำสั่ง getJSON ร่วมกับ jQuery Framework เพื่อโหลดข้อมูลจากไฟล์ JSON ด้วยภาษา JavaScript และแสดงข้อมูลที่ console สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง ข้อมูลในไฟล์ example1.json

[
    { "id": 1, "name": "PHP" },
    { "id": 2, "name": "MySQL" },
    { "id": 3, "name": "Python" },
    { "id": 4, "name": "C#" },
    { "id": 5, "name": "Java" }
]

ตัวอย่าง JavaScript อ่านไฟล์ JSON ด้วยคำสั่ง getJSON

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $.getJSON('example1.json', function(data) {
        for( var i=0; i<data.length; i++ ) {
            var id = data[i]['id'];
            var name = data[i]['name'];
            console.log( id+' / '+name );
        }
    });    
</script>

ผลลัพธ์

1 / PHP
2 / MySQL
3 / Python
4 / C#
5 / Java

JavaScript อ่านไฟล์ JSON ด้วยคำสั่ง getJSON มีรายละเอียดขั้นตอนดังนี้

1. ติดตั้ง jQuery แบบ CDN จากนั้นใช้คำสั่ง getJSON เพื่ออ่านข้อมูลจากไฟล์ example1.json โดยเก็บข้อมูลไว้ที่ตัวแปร data

2. ใช้ for วนลูปข้อมูลจากตัวแปร data โดยใช้คำสั่ง console.log เพื่อแสดงข้อมูล id และ name ออกสู่ console