JavaScript បោះទិន្ន័យដែលច្រើន item ទៅក្នុង HTML

បន្ទាប់ពីយើងសិក្សានិងរចនារូបរាងរួចហើយ ហើយនេះជាមេរៀនដែលបានរចនាវា។ មកដល់វេនយើងបោះទិន្ន័យទៅឲ្យវាទៅតាម JavaScript ដោយបង្កើត array object មួយផ្ទុកទិន្ន័យ

const list_item = [
    {
        "COMPANY":"Apple",
        "ITEM":[
            {
                "IMG":"img/i1.webp",
                "PRICE":"$500"
            },
            {
                "IMG":"img/i2.webp",
                "PRICE":"$450"
            },
            {
                "IMG":"img/i3.jpg",
                "PRICE":"$445"
            },
            {
                "IMG":"img/i4.webp",
                "PRICE":"$458"
            }]
    },
    {
        "COMPANY":"Samsung",
        "ITEM":[
            {
                "IMG":"img/s1.webp",
                "PRICE":"$300"
            },
            {
                "IMG":"img/s2.jpeg",
                "PRICE":"$330"
            },
            {
                "IMG":"img/s3.avif",
                "PRICE":"$250"
            },
            {
                "IMG":"img/s4.jpeg",
                "PRICE":"$400"
            }]
    },
    {
        "COMPANY":"Huawei",
        "ITEM":[
            {
                "IMG":"img/h1.png",
                "PRICE":"$200"
            },
            {
                "IMG":"img/h2.png",
                "PRICE":"$300"
            },
            {
                "IMG":"img/h3.png",
                "PRICE":"$350"
            },
            {
                "IMG":"img/h4.jpeg",
                "PRICE":"$240"
            }]
    },
    {
        "COMPANY":"Vivo",
        "ITEM":[
            {
                "IMG":"img/v1.jpg",
                "PRICE":"$200"
            },
            {
                "IMG":"img/v2.jpeg",
                "PRICE":"$230"
            },
            {
                "IMG":"img/v3.jpeg",
                "PRICE":"$100"
            },
            {
                "IMG":"img/v4.png",
                "PRICE":"$380"
            }]
    }]

ចំពោះនៅផ្នែក HTML វិញយើងសូម copy មួយផ្នែកពីរៀនមុនគឺមេរៀនរចនាមក loop វា

<div class="col-xxl-6 col-xl-6 col-lg-6 item-box1">
                <div class="box">
                    <h1>Hello Item</h1>
                    <div class="item">
                        <ul>
                            <li>
                                <a href="">
                                    <img src="1.webp" alt="">
                                    <span>$0.50</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="1.webp" alt="">
                                    <span>$0.50</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="1.webp" alt="">
                                    <span>$0.50</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="1.webp" alt="">
                                    <span>$0.50</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
HTML ពេញ
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="row" id="data_box">
        </div>
    </div>
</body>
<script src="javascript.js"></script>
</html>
JavaScript ពេញ
const list_item = [
    {
        "COMPANY":"Apple",
        "ITEM":[
            {
                "IMG":"img/i1.webp",
                "PRICE":"$500"
            },
            {
                "IMG":"img/i2.webp",
                "PRICE":"$450"
            },
            {
                "IMG":"img/i3.jpg",
                "PRICE":"$445"
            },
            {
                "IMG":"img/i4.webp",
                "PRICE":"$458"
            }]
    },
    {
        "COMPANY":"Samsung",
        "ITEM":[
            {
                "IMG":"img/s1.webp",
                "PRICE":"$300"
            },
            {
                "IMG":"img/s2.jpeg",
                "PRICE":"$330"
            },
            {
                "IMG":"img/s3.avif",
                "PRICE":"$250"
            },
            {
                "IMG":"img/s4.jpeg",
                "PRICE":"$400"
            }]
    },
    {
        "COMPANY":"Huawei",
        "ITEM":[
            {
                "IMG":"img/h1.png",
                "PRICE":"$200"
            },
            {
                "IMG":"img/h2.png",
                "PRICE":"$300"
            },
            {
                "IMG":"img/h3.png",
                "PRICE":"$350"
            },
            {
                "IMG":"img/h4.jpeg",
                "PRICE":"$240"
            }]
    },
    {
        "COMPANY":"Vivo",
        "ITEM":[
            {
                "IMG":"img/v1.jpg",
                "PRICE":"$200"
            },
            {
                "IMG":"img/v2.jpeg",
                "PRICE":"$230"
            },
            {
                "IMG":"img/v3.jpeg",
                "PRICE":"$100"
            },
            {
                "IMG":"img/v4.png",
                "PRICE":"$380"
            }]
    }]

    showData()
    
    function showData(){
        let txt = ""
        for(i in list_item){
            let subItem = list_item[i]["ITEM"]
            let subTxt = ""
            //MARK: Find value of ITEM
            for(y in subItem){
                subTxt +=`<li>
                        <a href="">
                            <img src="${subItem[y]["IMG"]}" alt="">
                            <span>${subItem[y]["PRICE"]}</span>
                        </a>
                    </li>`
            }
            txt +=`<div class="col-xxl-6 col-xl-6 col-lg-6 item-box1">
            <div class="box">
                <h1>${list_item[i]["COMPANY"]}</h1>
                <div class="item">
                    <ul>
                        ${subTxt}
                    </ul>
                </div>
            </div>
        </div>`
        }
        document.getElementById('data_box').innerHTML = txt
    }
នៅចំណុច //MARK: Find value of ITEM យើងអាចផ្លាស់ប្តូរទៅប្រើ function 
function subItems(data){
        let txt = ""
        for(i in data){
            txt +=`<li>
                <a href="">
                    <img src="${data[i]["IMG"]}" alt="">
                    <span>${data[i]["PRICE"]}</span>
                </a>
            </li>`
        }
        return txt
    }

return txt គឺយើងបោះតំលៃដែលចាប់បានហើយបោះតំលៃទៅឲ្យឈ្មោះ function 


    function subItems(data){
        let txt = ""
        for(i in data){
            txt +=`<li>
                <a href="">
                    <img src="${data[i]["IMG"]}" alt="">
                    <span>${data[i]["PRICE"]}</span>
                </a>
            </li>`
        }
        return txt
    }
Tags
Reactions

Post a Comment

0 Comments