他のhtmlページからデータを持ってきて、ウェブに出力したい。

Question

他のhtmlページからデータを持ってきて、ウェブに出力したい。

①以下のようなデータの入ったhtmlがあります(01.htmlとします)。
(自分の管理下なので好きに変更できます。)

<p>
{ name: "A", age: "10" }
{ name: "B", age: "20" }
・
・
・
</p>

②01.htmlから1行ごとにデータを取ってきて、
02.htmlのliタグの中にそれぞれ順番に表示させたいです。
(01.htmlと同じドメインの他のページです。)

<li>
  <a href=A.html">
    age<span>10</span>
  </a>
</li>
<li>
  <a href=B.html">
    age<span>20</span>
  </a>
</li>

※A,B,10,20は01.htmlから持ってきたいです。

自分なりに作ったもの

①からデータを取ってくるのは、ajaxでデータを取ってきて連想配列を作ろうとしました

$(function(){
  'use strict';

  $.ajax({
    type:'GET',
    url:'01.html'
  })
  function (data) {
    var array = $(data).find('p').text().split(/[\r\n]+/);
  }
});

こうすると

[
"", 
"  name: A, age: 10,", 
"  name: B, age: 20", 
""
]

と配列になったのですが、そうではなくて以下のような連想配列にしたいです。

[
    { name: A, age: 10 },
    { name: B, age: 20 },
]

連想配列にできれば、②の表示は以下の形でなんとかできそうです。

for(var key in array) {
      if(array.hasOwnProperty(key)) {
        var val = array[key];
        $('<li></li>').append('<a href=' + key + '.html">age<span>' + val + '</span></a>').appendTo('ul');
      }
    }

初心者なりにいろいろやってみたのですが、行き詰まっています。
もっと他に良い方法があるかも含めて教えていただきたいです。

Comments

[m.ts10806]

他のウェブページって自身の管理下のものでしょうか

[donkuri]

はい　自分の管理下です。
同じドメインの他のページです。

[donkuri]

説明を追加しました

Answer 1

(自分の管理下なので好きに変更できます。)

既に仕様として存在する JSON のフォーマットで書くと、JSON.parse() を活用できるはずです。

<p>
[
  {"name": "A", "age": "10" },
  {"name": "B", "age": "20" },
・
・
・
  {"name": "Z", "age": "15" }
]
</p>

また、HTMLに拘らず、p 要素を省いた 01.json の様式で整形されたテキストファイルを検討してもよさそうです。
jQuery.ajax() が展開してくれます。

Comments

[donkuri]

JSON.parse()やjQuery.ajax() は初めて知りました。
ありがとうございます。勉強になりました。

Answer 2

name: A, age: 10

nameの値がクォーテーションなしにAになっているので
このままでは無理ですね

Comments

[yambejp]

fetch('01.html').then(res=>res.text()).then(res=>{
var a=Object.assign(document.createElement('body'),{innerHTML:res});
console.log(a);
var b="["+a.querySelector('p').textContent.trim().split(/[\n\r]+/).join(',')+"]";
console.log(b);
var c=JSON.parse(b); /*ここでnameが解釈できないでエラー */
console.log(c);
});

[donkuri]

すいません　クォーテーションが抜けてたので追加しました。

[donkuri]

ありがとうございます。確認してみます。
ちょっと理解に時間がかかりそうです。

[yambejp]

キー名にもクォーテーションが必要ですがそれはなんとかします

fetch('01.html').then(res=>res.text()).then(res=>{
var a=Object.assign(document.createElement('body'),{innerHTML:res});
console.log(a);
var b="["+a.querySelector('p').textContent.trim().split(/[\n\r]+/).join(',').replace(/(\S+?)(?=:)/g,`"$1"`)+"]";
console.log(b);
var c=JSON.parse(b);
console.log(c);
});

[donkuri]

ありがとうございます。

[donkuri]

上記のコードでうまく行きました。
まだ少し理解が追いついていないですが、また勉強してみます。
ありがとうございました。