Search / filter data json from api និង Array Jquery

យើង search ទិន្ន័យចេញពី JSON

ជាទិន្ន័យ JSON

មានទិន្ន័យជា JSON មួយដូចខាងក្រោមនេះដោយយើងចង់ filter ទិន្ន័យណាមួយមកប្រើ

var myArray = [{"NAME":"Ros DUL", "AGE":20, "GENDER": "M"},
				{"NAME":"Keo", "AGE":18, "GENDER": "F"},
               {"NAME":"Seng", "AGE":25, "GENDER": "F"}, 
               {"NAME":"Dinna", "AGE":15, "GENDER": "M"},
               {"NAME":"Phors", "AGE":30, "GENDER": "F"},
               {"NAME":"Veas Sna", "AGE":23, "GENDER": "F"},]

យើងបោះទិន្ន័យចូលទៅក្នុង table 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <title>filter</title>
</head>
<body>
    <div class="container">
        <div>
            <input type="input" class="form-control" id="search-bar" placeholder="searching">
        </div>
        <table class="table">
            <tbody id="tableData"></tbody>
        </table>
    </div>
    
</body>
</html>
<script>
    var myArray = [{"NAME":"Ros DUL", "AGE":20, "GENDER": "M"},
				{"NAME":"Keo", "AGE":18, "GENDER": "F"},
               {"NAME":"Seng", "AGE":25, "GENDER": "F"}, 
               {"NAME":"Dinna", "AGE":15, "GENDER": "M"},
               {"NAME":"Phors", "AGE":30, "GENDER": "F"},
               {"NAME":"Veas Sna", "AGE":23, "GENDER": "F"},]

    dataTable(myArray)


    function dataTable(data){
        let table = ""
        for(nameArr of data){
            table +=` <tr>
                         <td>${nameArr.NAME}</td>
                         <td>${nameArr.AGE}</td>
                         <td>${nameArr.AGE}</td>
                     </tr>`
        }
        $("#tableData").html(table)
    }

</script>
យើងធ្វើ search

ការសិក្សា search ទិន្ន័យដោយយើងប្រើ keyup event នៃ Jquery

<body>
    <div class="container">
        <div>
            <input type="input" class="form-control" id="search-bar" placeholder="searching">
        </div>
        <table class="table">
            <tbody id="tableData"></tbody>
        </table>
    </div>
    
</body>
</html>
<script>
    var myArray = [{"NAME":"Ros DUL", "AGE":20, "GENDER": "M"},
				{"NAME":"Keo", "AGE":18, "GENDER": "F"},
               {"NAME":"Seng", "AGE":25, "GENDER": "F"}, 
               {"NAME":"Dinna", "AGE":15, "GENDER": "M"},
               {"NAME":"Phors", "AGE":30, "GENDER": "F"},
               {"NAME":"Veas Sna", "AGE":23, "GENDER": "F"},]


    dataTable(myArray)
    $("#search-bar").keyup(function(){
    let value = $(this).val()
    console.log(value)
 })


    function dataTable(data){
        let table = ""
        for(nameArr of data){
            table +=` <tr>
                         <td>${nameArr.NAME}</td>
                         <td>${nameArr.AGE}</td>
                         <td>${nameArr.AGE}</td>
                     </tr>`
        }
        $("#tableData").html(table)
    }

</script>
បង្កើត function

យើងបង្កើត function មួយដើម្បី search ទិន្ន័យ

 function searchBar(value, data){
        var filterData = []
        for(names of data){
            value = value.toLowerCase()
        let name = names.NAME.toLowerCase()
            
            if(name.includes(value)){
                filterData.push(names)
            }
        }
        return filterData
    }

ដោយ parameter value គឺជាការទទួយទិន្ន័យ search ហើយ parameter data គឺចាំទិន្ន័យនៃ array json យើងមកប្រើប្រាស់។

ប្រសិនជាយើងមិនប្រជា return ទេយើងអាចប្រើ variabl មួយសំរាប់ទទួលពី filterData។

var dataFile = []

        $("#search-bar").keyup(function(){
        let value = $(this).val()
         
        searchBar(value,myArray)
        console.log(dataFile)
     })

        function searchBar(value, data){
        var filterData = []
        for(names of data){
            value = value.toLowerCase()
        let name = names.NAME.toLowerCase()
            
            if(name.includes(value)){
                filterData.push(names)
            }
        }
        dataFile = filterData
        
    }

ប៉ុន្តែមកសិក្សាបន្តរអំពី return។ ហើយបន្ទាប់មកយើងហៅ funtion search ទៅប្រើនៅក្នុង event keyup របស់យើង។ រួចហើយយើងបង្កើត variable មួយចាប់តំលៃចេញ funtion search។ យើងសូមដាក់ឈ្មោះថា data

$("#search-bar").keyup(function(){
        let value = $(this).val()
        console.log(value)'
        // data is new value for get result after research
        var data = searchBar(value,myArray)
     })

វាមិនទាន់ដំណើរទេ យើងត្រូវហៅ functoin datTable នៃ table យើងមកប្រើទៀតរួចយើងបោះ parameter data ចូលទៅក្នុង function នឹង

$("#search-bar").keyup(function(){
        let value = $(this).val()
        console.log(value)'
        // data is new value for get result after research
        var data = searchBar(value,myArray)
        dataTable(data)
     })

នេះកូដដែលបានរៀន

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <title>filter</title>
</head>
<body>
   
    <div class="container">
        <div>
            <input type="input" class="form-control" id="search-bar" placeholder="searching">
        </div>
        <table class="table">
            <tbody id="tableData"></tbody>
        </table>
    </div>
    
</body>
</html>
<script>
    var myArray = [{"NAME":"Ros DUL", "AGE":20, "GENDER": "M"},
				{"NAME":"Keo", "AGE":18, "GENDER": "F"},
               {"NAME":"Seng", "AGE":25, "GENDER": "F"}, 
               {"NAME":"Dinna", "AGE":15, "GENDER": "M"},
               {"NAME":"Phors", "AGE":30, "GENDER": "F"},
               {"NAME":"Veas Sna", "AGE":23, "GENDER": "F"},]

    dataTable(myArray)

     $("#search-bar").keyup(function(){
        let value = $(this).val()
        // data is new value for get result after research
        var data = searchBar(value,myArray)
        dataTable(data)
        //console.log(data)
     })

     function searchBar(value, data){
        var filterData = []
        for(names of data){
            value = value.toLowerCase()
        let name = names.NAME.toLowerCase()
            
            if(name.includes(value)){
                filterData.push(names)
            }
        }
        return filterData
     }

    function dataTable(data){
        let table = ""
        for(nameArr of data){
            table +=` <tr>
                         <td>${nameArr.NAME}</td>
                         <td>${nameArr.AGE}</td>
                         <td>${nameArr.AGE}</td>
                     </tr>`
        }
        $("#tableData").html(table)
    }

</script>
Tags
Reactions

Post a Comment

0 Comments