vue js fetch API និង sort

កាទាញទិន្ន័យមកបង្ហាញពី API url ជាមួយ vue js ដោយយើងប្រើ axios ដើម្បី fetch data ហើយក៏មាន sort data (a-z) និង sort khmer unicode ចេញមុនអង់គ្លេស។ ចំពោះប្រើ style គឺ tailwindcss។

សូមដំឡើង npm axios នៅក្នុង project របស់យើង

https://www.npmjs.com/package/axios

npm i axios

នេះគឺជាការ fetch data

<template>
  <div class="container mx-auto w-screen-lg bg-slate-50 p-2">
    <div class="bg-sky-200 p-3 shadow-lg rounded-md mt-2 flex justify-between" 
      v-for="data in datas.value" v-bind:key="data">
      <h1 class="text-blue-600 text-lg font-semibold ml-10">{{data.title}}</h1>
      <p class="mr-10">{{ data.singer }}</p>
    </div>
  </div>
</template>

<script setup>
import {reactive ,onMounted} from 'vue'
import axios from 'axios';

const apiURL = 'https://script.google.com/macros/s/'
const key = 'AKfycbyJ8MadGqqWNk4NTH2zpSdJqxHyVI7kgcLziBKaHCgGtlyjw16vEpDmen3bHhSOQN7y/exec'
const datas = reactive([])

onMounted(async()=>{
  try {
    const getData = await axios(apiURL+key)
    const fbData = []
    getData.data.forEach(d => {
      const baseData = {
        "title": d[0],
        "singer" : d[1],
        "songurl" : d[2]
      }
      fbData.push(baseData)
    });
    datas.value = fbData
    console.log(datas)


  } catch (error) {
    console.log("Err" + error)
  }
 
})
</script>

sort (a-z)

យើងបានទាញទិន្ន័យមកហើយ ប៉ុន្តែវាមិនទាន់តាមលំដាប់ ដូច្នេះយើងត្រូវតម្រៀបវាឲ្យទៅតាមលំដាប់

<template>
  <div class="container mx-auto w-screen-lg bg-slate-50 p-2">
    <div class="bg-sky-200 p-3 shadow-lg rounded-md mt-2 flex justify-between" 
      v-for="data in datas.value" v-bind:key="data">
      <h1 class="text-blue-600 text-lg font-semibold ml-10">{{data.title}}</h1>
      <p class="mr-10">{{ data.singer }}</p>
    </div>
  </div>
</template>

<script setup>
import {reactive ,onMounted} from 'vue'
import axios from 'axios';

const apiURL = 'https://script.google.com/macros/s/'
const key = 'AKfycbyJ8MadGqqWNk4NTH2zpSdJqxHyVI7kgcLziBKaHCgGtlyjw16vEpDmen3bHhSOQN7y/exec'
const datas = reactive([])


onMounted(async()=>{
  try {
    const getData = await axios(apiURL+key)
    const fbData = []
    getData.data.forEach(d => {
      const baseData = {
        "title": d[0],
        "singer" : d[1],
        "songurl" : d[2]
      }

      //Sort Data (a-z)
      fbData.sort((a,b)=>a.title.localeCompare(b.title))

      fbData.push(baseData)
    });

    //បោះទិន្ន័យចូលទៅ reactive
    datas.value = fbData

  } catch (error) {
    console.log("Err" + error)
  }
 
})

</script>
            

sort អក្សរខ្មែរដាក់មុន

បន្ទាប់យើងបានតម្រៀបទន្ន័យយើងរួចហើយ ប៉ុន្តែទិន្ន័យវាមានលាយជាមួយអក្សរនិងអ្សរអង់គ្លេស ដូច្នេះតម្រៀបអក្សរមកមុនវីញ

<template>
  <div class="container mx-auto w-screen-lg bg-slate-50 p-2">
    <div class="bg-sky-200 p-3 shadow-lg rounded-md mt-2 flex justify-between" 
      v-for="data in datas.value" v-bind:key="data">
      <h1 class="text-blue-600 text-lg font-semibold ml-10">{{data.title}}</h1>
      <p class="mr-10">{{ data.singer }}</p>
    </div>
  </div>
</template>

<script setup>
import {reactive ,onMounted} from 'vue'
import axios from 'axios';

const apiURL = 'https://script.google.com/macros/s/'
const key = 'AKfycbyJ8MadGqqWNk4NTH2zpSdJqxHyVI7kgcLziBKaHCgGtlyjw16vEpDmen3bHhSOQN7y/exec'
const datas = reactive([])


onMounted(async()=>{
  try {
    const getData = await axios(apiURL+key)
    const fbData = []
    getData.data.forEach(d => {
      const baseData = {
        "title": d[0],
        "singer" : d[1],
        "songurl" : d[2]
      }

      //Sort Data (a-z)
      fbData.sort((a,b)=>a.title.localeCompare(b.title))

      fbData.push(baseData)
    });

// តម្រៀបអក្សរខ្មែរមុន
    const khmerRegex = /[\u1780-\u17FF]/
    fbData.sort((a,b)=>{
      if(khmerRegex.test(a.title) && !khmerRegex.test(b.title)){
        return -1
      }else if(!khmerRegex.test(a.title) && khmerRegex.test(b.title)){
        return 1
      }
    })

    //បោះទិន្ន័យចូលទៅ reactive
    datas.value = fbData

  } catch (error) {
    console.log("Err" + error)
  }
 
})

</script>

អក្សរខ្មែរដំណើរដោយកូដ u1780 ដល់ u17FF វាត្រូវបានហៅថា Regular Expression នេះគឺវែបសាយ https://searchcode.com/codesearch/view/16257357/

githup