何を知りたいのか
例えば、JSONデータを全て取得してjsonという変数にパースしたデータを保存したとします。
その変数から任意のデータを取得することはできましたが、IDを手動で入力してそのIDに基づいた情報のみ自動で取得する処理の方法がわかりません。
想定しているフロー
- HTMLのタグ内に任意のIDを入力する(WordPress側でIDを入力)
- WordPress側で記事を更新する
- ブラウザ上で見た時に、IDに紐付いた情報に自動的に書き換わっている
Youtubeの埋め込みコードを元に説明すると、この動画のIDは「QVy4uQjIkfY」と考えられます。
html
1<iframe width="560" height="315" src="https://www.youtube.com/embed/QVy4uQjIkfY" frameborder="0" allowfullscreen></iframe>
このIDを変えることでブラウザ上で表示されるコンテンツも変わる仕組みを作りたいと考えています。
理想は、iframe化なのですが、javascriptに慣れていないため簡単に作れないかと思っています。
現状は、HTMLファイルにタグを埋め込んでinnnerHTML等で内容を変更しています。
完了していること
- Web上のJSONファイルから情報を取得し、innerHTML等で任意の情報をブラウザに表示すること
- タイムアウト処理
- リクエストヘッダ
どんなことを実現したいのか
- Markdown方式のように、手動で任意のIDを入力したらその値によって表示されるものが異なるような処理(可能であればPure Javascriptで実装したい)
現状
html
1<img id="ikyu-acm-image"> 2<h3 id="ikyu-acm-name"></h3> 3<p id="ikyu-acm-area"></p> 4<p id="ikyu-acm-price"></p>
javascript
1var xhr = new XMLHttpRequest(); 2var timerId = window.setTimeout(function() { 3 xhr.abort(); 4}, 5000); 5xhr.onreadystatechange = function() { 6 if (xhr.readyState == 4) { 7 window.clearTimeout(timerId); 8 if (xhr.status == 200) { 9 var json = JSON.parse(xhr.responseText); 10 document.getElementById('acm-image').src = json.XXXXX.XXXXX; 11 document.getElementById('acm-name').innerHTML = json.XXXXX.XXXXX; 12 var smallAreaNm = document.getElementById('acm-area'); 13 smallAreaNm.innerHTML = json.XXXXX.XXXXX; 14 } 15 } 16}; 17xhr.open('GET', 'APIのURL', true); 18xhr.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT'); 19xhr.send(null);
※ XXXXX.XXXXX = パラメーラー(秘密なため隠した)
回答2件
あなたの回答
tips
プレビュー