Javascript 手動で任意のパラメーターを入力し、それに紐付いたデータをJSONファイルから取得したい

Question

何を知りたいのか

例えば、JSONデータを全て取得してjsonという変数にパースしたデータを保存したとします。
その変数から任意のデータを取得することはできましたが、IDを手動で入力してそのIDに基づいた情報のみ自動で取得する処理の方法がわかりません。

想定しているフロー

1. HTMLのタグ内に任意のIDを入力する（WordPress側でIDを入力）
2. WordPress側で記事を更新する
3. ブラウザ上で見た時に、IDに紐付いた情報に自動的に書き換わっている

Youtubeの埋め込みコードを元に説明すると、この動画のIDは「QVy4uQjIkfY」と考えられます。

<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で実装したい）

現状

<img id="ikyu-acm-image">
<h3 id="ikyu-acm-name"></h3>
<p id="ikyu-acm-area"></p>
<p id="ikyu-acm-price"></p>

var xhr = new XMLHttpRequest();
var timerId = window.setTimeout(function() {
  xhr.abort();
}, 5000);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    window.clearTimeout(timerId);
    if (xhr.status == 200) {
      var json = JSON.parse(xhr.responseText);
      document.getElementById('acm-image').src = json.XXXXX.XXXXX;
      document.getElementById('acm-name').innerHTML = json.XXXXX.XXXXX;
      var smallAreaNm = document.getElementById('acm-area');
      smallAreaNm.innerHTML = json.XXXXX.XXXXX;
    }
  }
};
xhr.open('GET', 'APIのURL', true);
xhr.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
xhr.send(null);

※ XXXXX.XXXXX = パラメーラー（秘密なため隠した）

Comments

[kei344]

「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

[spellbound]

改善しました。

[kei344]

「手動」とは？再現可能なHTMLとフローを提示ください。

[退会済みユーザー]

改善されたとのことですが、自分には依然として「IDを手動で入力してそのIDに基づいた情報のみ自動で取得」という肝心なところが何をしたいのか分からないのですが・・・
ご参考 https://teratail.com/help/question-tips

[spellbound]

伝え方が下手で申し訳ありません。おそらく自分の中でもどのように実装すれば良いのか固まってないため伝えきれないのかと思います。もうちょっと整理します。

[spellbound]

一応、編集しました。

[退会済みユーザー]

「IDを手動で入力してそのIDに基づいた情報のみ自動で取得」＝「URL に ID を追加（例: http://example.com/ID）して AJAX で GET 要求し、ID で選択された情報を取得」ということですか？　であれば、Web サーバー側で何とかするという話になると思うのですが。

[spellbound]

Web上のAPIを叩いてJSON吐き出してそのデータをパースして変数に入れて表示という流れを想定していました。

[spellbound]

https://developers.google.com/youtube/iframe_api_reference?hl=ja

[spellbound]

ちなみに、上記の作り方を参考に進めればiframeは作れるのでしょうか？

[退会済みユーザー]

？？？　質問欄の YouTube の話は参考に出しただけで、あくまで質問者さん自作の Web API から JSON 文字列を取得して何かするという話だと思っていたのですが、違うのですか？

[spellbound]

あー、その例は削除リクエストしました。おっしゃる通り、自作のAPIです。

[退会済みユーザー]

堂々巡りになってしまっていますが・・・　「その例は削除リクエスト」ということは、質問の YouTube の説明（ID を URL に含めて GET 要求）は忘れてくれと言ってます？　そうすると先のコメントに戻って、自分には依然として「IDを手動で入力してそのIDに基づいた情報のみ自動で取得」という肝心なところが何をしたいのか分からないのですが・・・

Answer 1

<input id="inputId" type="text">

var inputId = document.getElementById("inputId").value;

まずこれで入力フォームから任意の文字列を受け取れます。

var data = json[inputId];

これでjsonから指定のパラメータを受け取れます。パースされたjsonオブジェクトはただの連想配列(または配列)なので、[]でパラメータ名を指定すればその値がとれます。

Answer 2

理想は、iframe化なのですが、javascriptに慣れていないため簡単に作れないかと思っています。

iframe はHTMLの中に別のHTMLを読み込むようなものなので、とくにJavaScriptを必要としません。

【iframe 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe

下記のようにして index.php 側でパラメータ（id）を受け取り、それを表示すればよいだけな気がします。

<iframe width="560" height="315" src="https://example.com/index.php?id=1" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://example.com/index.php?id=999" frameborder="0" allowfullscreen></iframe>

---

Ajaxでパラメータを渡すのであれば、send メソッドで送ればよいでしょう。

xhr.send( 'param1=value1&param2=value2' );

【XMLHttpRequest - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest#send()

【XMLHttpRequest についてのメモ - Qiita】
http://qiita.com/sirone/items/412b2a171dccb11e1bb6

【XMLHttpRequest の使い方 - WebOS Goodies】
http://webos-goodies.jp/archives/50548720.html

---

特定の要素にidを埋め込んで、それを読み出すなら、例えば下記のようにします。

<div class="hidden" data-id="777"></div>

var data_id = document.querySelector( "[data-id]" ).getAttribute( "data-id" );
```**動くサンプル：**[https://jsfiddle.net/nnq3x9qa/](https://jsfiddle.net/nnq3x9qa/)


【document.querySelector - Web API インターフェイス | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector)

【element.getAttribute - Web API インターフェイス | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Element/getAttribute](https://developer.mozilla.org/ja/docs/Web/API/Element/getAttribute)