ดึงข้อมูล JSON มาแสดง HTML ด้วย jQuery

ดึงข้อมูล JSON มาแสดง HTML ด้วย jQuery บทความนี้สอนเขียน JavaScript เพื่อแสดงข้อมูลจากไฟล์ JSON ด้วย jQuery บนเว็บไซต์ HTML ด้วยคำสั่ง getJSON และ append สามารถเขียนโปรแกรมได้ดังนี้

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

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

ตัวอย่าง ดึงข้อมูล JSON มาแสดง HTML ด้วย jQuery

<div id="result"></div>
<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'];
            $("#result").append("<div>"+id+". "+name+"</div>");
        }
    });    
</script>

ผลลัพธ์

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

ดึงข้อมูล JSON มาแสดง HTML ด้วย jQuery จากโค้ดตัวอย่างใช้คำสั่ง getJSON ดึงข้อมูลจากไฟล์ json เก็บไว้ที่ตัวแปร data จากนั้นใช้คำสั่ง for วนลูปข้อมูล พร้อมกับแสดงข้อมูลที่ div id = result ด้วยคำสั่ง append