LoginSignup
1
0
記事投稿キャンペーン 「2024年!初アウトプットをしよう」
@stomokiyo(坂下 智清)

Client Actionでfetchしてみた

Last updated at Posted at 2024-01-21

こちらの郵便番号WebAPIを使用させていただきます
https://anko.education/webapi/zipcode
image.png
とのことです

Screenを右クリック、Add Local VariableでVarZipcodeを作成

ScreenにInputを配置し、VarZipcodeを設定

ScreenにButtonを配置、ダブルクリック

image.png

JavaScriptを配置、VarZipcodeを渡し、その上のJavaScriptをダブルクリック（または...をクリック）
image.png

Parametersを右クリックして、Add Output Parameter
image.png

JavaScriptを記述します
image.png

私はJavaScirpt歴は深くないのでコピペです
fetchは非同期らしくresolveを入れたらなおりました
エラー処理も？？？なので、その点、注意してください

 let txt = "https://api.anko.education/zipcode?zipcode=" + $parameters.VarZipcode;
 
  func1 = async function (){
    let result = await fetch(txt);
    let text = await result.text();
    console.log(text);

    $resolve();

    $parameters.Out1 = text;
    
  }
  func1();

次に戻り値を格納するStructureを作成
DataタブのStrecturesで右クリックして、Add Structure from JSON...
image.png

戻り値のjsonをコピーして
https://api.anko.education/zipcode/?zipcode=1130033
image.png

こちらにペーストします
名前はaddress
image.png

JSONが解析されて、Structureが作成されます。
image.png

Screenを右クリックし、Add Local VariableでVarAddress
Data TypeをAddress
image.png

JavaScriptの下にJSONDeserializeを配置
JavaScript.Out1をAddressにします
image.png

Assignを配置
VarAddressにJSONDeserializeAddress.Dataを入れます
image.png

ScreenにExpressionを５つ配置
VarAddressの５つの項目が表示されるようにします
image.png

存在する郵便番号を入力して、ボタンを押すと、住所が表示されました
image.png

存在しない郵便番号を入力して、ボタンを押すと、エラーになりました
エラー処理が必要と思います
image.png

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0