【javascript】Ajaxを使ってwebブラウザ(html)内のscriptタグの配列を取得したい

前提

他のページからAjaxでデータを取得して、別ページに表示させたいです。
取得したいページがjavascriptのデータをもとに生成されており、
この中のscriptタグの中身を取得できずに困っています。

取得元ページ（sample.html）

<div id="content">
  <h2>{[{d.title}]}</h2>
  <div class="box">
    <p class="img"><img src="/image/sample/{[{d.id}]}"></p>
    <p class="date">{[{d.date}]}</p>
    <p class="text">{[{d.text}]}</p>
  </div>
</div>
<script type="text/javascript">
  var data = {};
  data.detail = [
  { id:'AAA', date:'2022/01/01', text:'テキストテキスト', title:'タイトルA', type:'1'},
  { id:'BBB', date:'2022/01/02', text:'テキストテキスト', title:'タイトルB', type:'1'},
  { id:'CCC', date:'2022/01/03', text:'テキストテキスト', title:'タイトルC', type:'2'};
  ]
</script>

実現したいこと

data.detailの配列を他ページから取得したい
取得の際にtypeが1のときのみ取得したい

試したこと

HTMLを取得することはできましたが、その中のdata.dtailの配列を取得できるイメージがまったく湧きません。

取得先ページ（get.html）

<div class="sample">ここに表示させたい</div>

<script>
  $(function(){
    const URL = '//' + location.host + '/sample/page/sample.html';
    $.ajax({
      url:URL,
      dataType:'html',
    })
    .then(
    function (data) {
      console.log(data);
    },
    function () {
      console.log('エラー');
    }
    );
  });
</script>

＞＞結果：<!DOCTYPE html>...

発生している問題・エラーメッセージ

jsonで取得しようとしましたが、エラーがでました。(そもそもjsonファイルじゃないから？)

$(function(){
    const URL = '//' + location.host + '/sample/page/sample.html';
    $.ajax({
      url:URL,
      dataType:'json',
    })
    .then(
    function (data) {
      console.log(data);
    },
    function () {
      console.log('エラー');
    }
    );
  });

＞＞結果：エラー

Ajaxを使ってscriptタグ内の配列を取得することは可能なのでしょうか...？
どなたかわかる方がいらっしゃったらおしえてください。

退会済みユーザー

2022/06/19 04:08

質問者さん、無言ですが、回答が出ているのでそれらに対するフィードバックをタイムリーに返してください。役に立った/立たなかったぐらいはすぐに返せるのでは？役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。とにかく無言は NG です。

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

回答2件

ベストアンサー

まず、その $.ajax() で得た HTML ソースか fetch() の response.text() で得た HTML ソースをパーズして DOM を取得します。または、XMLHttpRequest の responseType = "document" を使って DOM を得ます。

その DOM から目的の <script> の textContent プロパティを取得、その値を元に eval() するか自ドキュメントの <script> を作って挿入して実行、でグローバル変数 data が得られるはずです。

投稿2022/06/17 13:34

int32_t

総合スコア20884

takashi691

2022/06/20 02:03

ご回答いただきありがとうございます！ Ajaxで取得したデータをパーズするとプロパティを取得することができました！大変助かりました。ありがとうございました。

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

以下は質問の直接の答えにはなってなくてすみません。

全部静的な html でやることを考えているようですが、そういう必要があるんですか？　将来的にデータはサーバー側にある DB などから取得することも考えているのではないのでしょうか？

であれば、普通に考えると、そういうことをしたい場合は Web アプリ (Web API) を作って、それに対して get .html から jQuery ajax を使って Web API に要求をかけて JSON 文字列を送信してもらい、受け取った JSON 文字列を JavaScript で処理して望む結果を表示するという話になると思うのですが。

Web API から Type が 1 のデータのみ返して欲しければ、例えばクエリ文字列で type=1 というように URL に追加して送信すれば、Web API 側でそれを見て処理し Type が 1 のみの JSON 文字列を返すと言ったことも可能だと思います。

投稿2022/06/17 14:18

編集2022/06/17 14:19

退会済みユーザー

総合スコア0

takashi691

2022/06/20 02:07

返答が遅くなってしまい申し訳ございませんでした。おしゃる通り、最終的にはAPIから取得できるような仕組みがあると良いですね... 今回の場合、早めの対応が必要だった背景がありましたので、このような形の質問になってしました... 今後の参考にさせていただきます。ご回答いただきありがとうございました！

退会済みユーザー

2022/06/20 03:04

余計なお世話かもしれませんが・・・ > 今回の場合、早めの対応が必要だった背景がありましたので、このような形の質問になってしました... 将来的にあるべき姿まで考えた場合は逆に遠回りになるのではないかと思います。自分で Web API を作るのはまだ無理であれば、公開されている Web API サービスを使って練習されてはいかがかと思います。

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

あなたの回答