json形式で取得した結果のjavascript内での変数(var)表示

Question

https://example.jp/ipadd.php
を叩くと、クライアント側のIPアドレスがjson形式で表示されます。
{"ip":"1XX.5X.1XX.5X"}

これをクライアント(javascript側)で変数として使用したいと考えています。

下記では、console.log　には　iPアドレスが表示されます。

やりたいこと
この結果を変数　var ip　として取り出したいのですが、下記では取り出すことができません。

document.write("" +ip+"");
でipアドレスを表示したいのですが、どうすればいいかご教示願います。

<script>
let xhr = new XMLHttpRequest();
xhr.open('GET', "https://example.jp/ipadd.php");

xhr.onload = () => {
  let responseJson = JSON.parse(xhr.response);
  console.log(responseJson.ip);

var ip = responseJson.ip;
}
xhr.send();
</script>

<script>
document.write("" +ip+"");
</script>

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  var url="https://example.jp/ipadd.php"
  fetch(url).then(res=>res.json()).then(data=>document.querySelector('#view').textContent=data.ip);
});
</script>
<div id="view"></div>

Comments

[tajix_japan]

有難うございます。
<div id="view"></div>　で表示する方法ではなく、
変数で表示する方法を探していました。
(最終的にローカルストレージに格納する方針ですので、
web上で表示されるだけでは使用用途に適さない)

幸い、<div id="view"></div>　で表示する方法を改造
する形で、自己解決いたしました。

ご提案いただいた方法の改造でも行けると思います。
有難うございました。

Answer 2

下記で自己解決できました。

<script type="text/javascript" src="./jquery.min.js"></script> <script> let xhr = new XMLHttpRequest(); xhr.open('GET', "https://example.jp/ipadd.php"); xhr.onload = () => { let responseJson = JSON.parse(xhr.response); console.log(responseJson.ip); $(".ipp").text(responseJson.ip); } xhr.send(); var ippp ="<a class='ipp'></a>"; </script> <script> document.write("" +ippp+""); </script>

Answer 3

XMLHttpRequestは非同期なので、すぐに返答がくるわけではありません。
そのため、上記コードの場合は、document.write("" +ip+"");が呼ばれた後に、
・var ip = responseJson.ip;が呼び出されているため、取り出すことが出来ないのではないでしょうか？

どうすればいいかご教示願います。

やりたいこと次第なので、具体的な案は出せませんが、一番簡単なのは、var ip = responseJson.ip;の後ろに書く、ですかね。

xhr.onload = () => {
  let responseJson = JSON.parse(xhr.response);
  console.log(responseJson.ip);

  var ip = responseJson.ip;
  document.write("" +ip+"");
}

（ただこれだと変数を用いる意味は無くなりますが。。）

Comments

[tajix_japan]

有難うございます。
>（ただこれだと変数を用いる意味は無くなりますが。。）
まさにこの状態になってしまいます。(IP以外表示されない)

あくまで、ホームページ内でいろいろ使いまわせる変数として取り出したいというのが希望です。
このような用途は必然的に多い(というかconsole.logで終わることはないはず)
はずなのですが、なぜかググった限りではconsole.logで終わっている例がしか
なく困っています。
よろしくお願いいたします。

[yuuyu]

1箇所訂正です。
上記コードの場合は、document.write("" +ip+"");が呼ばれた後に、
・var ip = responseJson.ip;が呼び出されているため、取り出すことが出来ないのではないでしょうか？
> 上記に加え、varが関数スコープ内で呼び出されているので、関数の外であるdocument.write("" +ip+"");ではipの参照自体はできません。

> ホームページ内でいろいろ使いまわせる変数として取り出したいというのが希望です。
であれば単純にグローバル変数としてvar ip;を設定し、そこに代入すればいいのではないでしょうか？
ただ、質問文のdocument.write("" +ip+"");の箇所では、まだipに代入がされていないので、この箇所では取得できません。

[tajix_japan]

ただ、質問文のdocument.write("" +ip+"");の箇所では、まだipに代入がされていないので、この箇所では取得できません。

ありがとうございます。
自己解決できました。
お手数をおかけいたしました。有難うございました。