Api in javascript

Fetch api ကို အသုံးပြုမယ်ဆို အရင်ဆုံး js မှာ fetch() နဲ့စရပါမယ်။ () ထဲမှာသင် request လုပ်ချင်တဲ့ api ကို url ကနေတစ်ဆင့်ပို့ပေးရပါမယ်။ 

ဒီ github link ထဲမှာ jsonplaceholder website ကိုသုံးပြီး data တွေကို ဘယ်လိုယူလဲ ပြပေးမှာပဲ ဖြစ်ပါတယ်။ ပထမဆုံး fetch နဲ့ data ယူမယ့် url ကိုထည့်ပေးပါမယ်။ website ထဲကိုဝင်ကြည့်မယ်ဆို /users အပြင် ကျန်တာတွေလည်းထည့်လို့ရပါတယ်။ jsonplaceholder.com ထဲမှာ ကြည့်လို့ရပါတယ်။


ဒီတော့ .then(response => response.json()) က ဘာလုပ်တာလဲဆိုတော့ jsonplaceholder website က ပို့ပေးလိုက်တဲ့ data တွေကို json အဖြစ် ပြောင်းလိုက်တာပါ။ .then(resp => {}) မှာ resp နေရာမှာကြိုက်တာသုံးလို့ရပါတယ်။  resp က ဘာကိုကိုယ်စားပြုလဲဆိုတော့ အပေါ်က then() မှာ json အဖြစ်ပြောင်းလိုက်တဲ့ data တွေကို ကိုယ်စားပြုပါတယ်။ ဒါမယ့် အဲ့ data တွေက json object အဖြစ် အများကြီးဖြစ်နေပါတယ်။ အဲ့ data တစ်ခုစီကို website မှာပြချင်တာပါ၊ အဲ့တော့ forEach ကိုသုံးပြီး json object ထဲက data တစ်ခုစီကိုယူမယ်။ div တစ်ခုကို create လုပ်ပြီး အဲ့ div ထဲမှာ data တွေကို innerHTML နဲ့ သင်လိုချင်တဲ့ style နဲ့လုပ်နိုင်ပါတယ်။ နောက်ပြီးမှ အဲ့ div ကို အဓိက div ထဲ appendChild ကိုသုံးပြီးထည့်လိုက်ပါတယ်။ ${element.name} က json object ထဲက item တွေရဲ့ properties တွေကို access လုပ်ရုံပါပဲ သင်ဘယ် properties တွေကို access လုပ်နိုင်လဲဆိုတာကို resp ကို console.log လုပ်ပြီး ကြည့်နိုင်ပါတယ်။ 

နောက်တစ်ခုက pokemon api ကိုသုံးပြီး pokemon ရဲပုံကိုယူတာပါ။ ဒါမယ့် console.log(data) နဲ့ သင်ဘယ် properties တွေကို access လုပ်နိုင်လဲ ကြည့်ပြီး access လုပ်နိုင်ပါတယ်။ project idea လေးတစ်ခုပေးချင်ပါတယ်။ အဲ့ pokemon api ကိုသုံးပြီး pokemon တွေနဲ့ပက်သက်တဲ့ info တွေပြောပြတဲ့ website လေး လုပ်စေချင်ပါတယ်။ pokeapi.co မှာလည်း အဲ့ api အကြောင်းပိုနားလည်အောင်ဖတ်နိုင်ပါတယ်။



Popular posts from this blog

Data Structure introduction

Image
Data Structure ဆိုတာ data တွေကို memory ထဲမှာ ပုံစံတစ်ခုခု ဒါမှမဟုတ် structure တစ်ခုအဖြစ်သိမ်းဆည်းထားတဲ့အရာဖြစ်ပြီး data structure တစ်ခုစီတိုင်းမှာ advantage တစ်ခုစီရှိပါတယ်။ အပေါ်ကပုံထဲကအတိုင်း data structure ကိုအမျိုးအစားခွဲထားပါတယ်။ Linear data structure ဆိုတာကတော့ data တွေက sequential ဖြစ်နေပြီး data တစ်ခုက သူ့ရဲ့ ရှေ့က data နဲ့ နောက်က data နဲ့ တစ်နည်းနည်းနဲ့ချိတ်ဆက်နေပါတယ်။ ဉပမာ array, stack, queue, linked list လိုမျိုပေါ့။ . Static data structure မှာတော့ data တွေက fixed memory size ရှိပါတယ်။ အဲ့တာကဘာလဲဆိုတော့ static data structure တစ်ခုကို ဖန်တီးပြီးရင် hard code လုပ်ရုံကလွဲပြီး ကျန်တဲ့နည်းနဲ့ ပြောင်းလို့မရပါဘူး။ python က tuple နဲ့ concept တူပါတယ်။ ဉပမာ array လိုမျိုးပေါ့။ array ကိုပြောင်းလဲလို့ရတာသိပါတယ်။ တစ်ချို့ Programming Laguage တွေဖြစ်တဲ့ java, c++ တွေမှာ array ကို create ပြီးပြန်ပြင်လို့မရတာကို static array ဖြစ်ပြီး၊ java.util package ထဲက ArrayList ကိုတော့ create ပြီးလည်းပြင်လို့ရတဲ့အတွက် dynamic array ပဲ ဖြစ်ပါတယ်။ . Dynamic data structure ကတော့ fixed memory ...
Read more

Algorithm basic examples

Image
အရင်ဆုံး return statement ဘယ်လိုအလုပ်လုပ်လဲ သိရပါမယ်။ function တစ်ခုရဲ့ value ကိုသတ်မှတ်ပေးတယ့် statement ဖြစ်ပြီး၊ value တစ်ခုခုကို return လိုက်ရင်အောက်က code တွေကို ဆက်မ run ပဲ။ function ကိုအဆုံးသတ်ပေးပါတယ်။ example နဲ့ကြည့်ရအောင်။ အောက်က ပုံမှာ function နှစ်ခုကို နှိုင်းယှဉ်ကြည့်ပါ။ တစ်ခုက return statment နဲ့ နောက်တစ်ခုက print နဲ့နှိုင်းယှဉ်ထားတာပဲ ဖြစ်ပါတယ်။ print_variable ထဲက function က x ကို print ပဲ လုပ်တာပါ။ variable ထဲက function က ဘာတန်ဖိုးမှမရှိပါဘူး None ပါ။ နောက်တစ်ခုကတော့ return statement နဲ့ ဖြစ်ပြီး ဘာကိုမှ print မလုပ်ပါဘူး၊ return ရှေ့က value ကိုပဲ return_variable ထဲ assign လိုက်တာပါ။ အောက်က ဉပမာမှာတော့ x ကို return လိုက်တဲ့အခါ function က အဆုံးသတ်သွားပြီး အောက်က code တွေကိုရပ်လိုက်ပါတယ်။ အပေါ်ဆုံးက algorithm 3 ခု ကို pseudo code နဲ့ရေးထားပြီး အောက်ဆုံးကဟာကိုတော့ python2 အသုံးပြုထားပါတယ်။ 1. X and Y multiply Input နှစ်ခုယူပါမယ်။ X and Y ဖြစ်ပြီး၊ နှစ်ခုကိုမြှောက်မယ့် algorithm ပါ။ ဒါကတော့ ရိုးရှင်းပါတယ်။ ရှင်းပြစရာမလိုလောက်ဘူးထင်တယ်။ 2...
Read more

Dom introduction

ဒီ Series မှာအရင်ဆုံး DOM manipulation အကြောင်းနဲ့အရင်ဆုံးစတင်ပါမယ်။ အရင်ဆုံး DOM ဆိုတာဘာလဲ။ နောက်တစ်မျိုး Document Object Model လို့လည်းခေါ်လို့ရပါတယ်။ Html element တွေကို ​javascript ကိုသုံးပြီး ပြောင်းလဲချင်တယ်၊ attribute တွေကိုပြောင်းလဲမယ်၊ javascript ထဲမှာပဲ html element တွေဖန်တီးမယ် စတဲ့ task တွေကို DOM ကိုအသုံးပြုပြီး ပြုလုပ်ရမှာပဲ ဖြစ်ပါတယ်။ Dom မှာ Html element တွေကို object တစ်ခုအနေနဲ့ manipulate လုပ်ပါတယ်။ object ဆိုတာဘာလဲ မသိရင် javascript oop ကိုနည်းနည်းလေ့လာဖို့လိုပါမယ်။ Web development မှာ Dom manipulation ဟာအရေးကြီးပါတယ် ဘာလို့လဲဆိုတော့ Html element တွေကိုပြောင်းလဲတဲ့အခါမှာ refresh လုပ်စရာမလိုပါဘူး။ ဉပမာပေးပြီးပြောပါမယ်။ Social media website တစ်ခု သင့်မှာရှိတယ်။ အဲ့ website ထဲက post တစ်ခုကို like လုပ်လိုက်ရင် like လုပ်ခံထားရတဲ့ post ရဲ့ id ကို web server ကိုပို့လိုက်မယ်။ post တစ်ခုစီတိုင်းမှာ unique id တစ်ခုရှိတယ်သဘောထားလိုက်။ web server က database ထဲမှာအဲ့ id နဲ့ post ကိုရှာပြီး အဲ့ post ရဲ့ like အရေအတွက်ကို တစ်ခုတိုးပေးလိုက်ပြီ။ ဒါမယ့် like အရေအတွက်တိုးလာတာကို တွေ့ရဖိ...
Read more