json HTML出力

APIを使って郵便番号を表示したいと思っています。
コンソールの中には出てくるのですが、HTML上に表示する方法がわからないので教えていただけたら嬉しいです。

function input_addres(){
  console.log("aaa");
  let addres = document.getElementById("addres").value;
  var url = "https://zip-cloud.appspot.com/api/search?zipcode=" + addres ;
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function(){
    if (xhr.readyState === 4 && xhr.status === 200){
      var res_text = xhr.responseText;
      //文字列を JSONとして解析
      var res_json = JSON.parse(res_text);
      console.log(res_json)
    }
  };
  xhr.send(null);
}

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScriptの学習</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <form>
      <p>郵便番号:（ハイフンなしで入力してください）</p>
      <p>〒<input type="text" id="addres" onblur="input_addres()" ></p>
      <p id="result_display"></p>
    </form>
    <script type="text/javascript" src="../js/es6_1.js"></script>
  </body>
</html>

行動規範の内容に同意します

回答4件

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  zip.addEventListener('input',()=>{
4    const v=zip.value;
5    if(/^\d{7}$/.test(v)){
6      const url = `https://zip-cloud.appspot.com/api/search?zipcode=${v}`; 
7      fetch(url).then(x=>x.json()).then(x=>{
8        const r=x.results[0];
9        address.textContent=`${r.address1}${r.address2}${r.address3}`;
10      });
11    }
12  });
13});
14</script>
15<p>〒<input type="text" id="zip"></p>
16<p id="address"></p>

投稿2022/06/06 07:48

yambejp

総合スコア114769

ベストアンサー

とりあえず、まずはJSONそのままをresult_displayに表示して、その後どう加工するか考えてみるといいと思います。

js
1const res_text = xhr.responseText;
2document.querySelector('#result_display').textContent = res_text;

投稿2022/06/06 07:42

int32_t

総合スコア20832

bskbbbggg

2022/06/06 08:01

回答ありがとうございます。解決できました。

行動規範の内容に同意します

コンソールの中には出てくるのですが、HTML上に表示する方法がわからない

そのために html コードにある <p id="result_display"></p> が用意されているのではないのですか？であれば、getElementById メソッドでその要素を取得して innerText を使って表示すれば良いのでは？

投稿2022/06/06 07:41

退会済みユーザー

総合スコア0

ご掲示いただいたJavascriptの「console.log(res_json)」の部分に「document.getElementById」等でElementオブジェクトを取得してテキストを設定してください。

Mozila web docs(document.getElementById)

javascript
1function input_addres(){
2  console.log("aaa");
3  let addres = document.getElementById("addres").value;
4  var url = "https://zip-cloud.appspot.com/api/search?zipcode=" + addres ;
5  var xhr = new XMLHttpRequest();
6  xhr.open('GET', url, true);
7  xhr.onreadystatechange = function(){
8    if (xhr.readyState === 4 && xhr.status === 200){
9      var res_text = xhr.responseText;
10      //文字列を JSONとして解析
11      var res_json = JSON.parse(res_text);
12      console.log(res_json) // ←　この部分を修正
13    }
14  };
15  xhr.send(null);
16}