GaroonのHTMLポートレットでサーバーのAPIを呼び出して値を表示

[yos (吉田昌二)]

GaroonのHTMLポートレットでサーバーのAPIを呼び出し、JSONで受け取った値をブラウザに出力しています。
/----------------/
const main = () => {
initialize();

document
.querySelectorAll(“#moviemanager input[name=‘words’]”)
.forEach((input) => {
input.addEventListener(“change”, refresh);
});

button.onclick = async () => {
const words = ‘%’ + document.querySelector(
“#moviemanager input[name=‘words’]”
).value + ‘%’;

const encoded = encodeURI(words);

const url = baseUrl + ‘/’ + encoded;
const method = “GET”;
const headers = {};
const data = {};

const res = await garoon.base.proxy.send(
proxyCode,
url,
method,
headers,
data
);

const json = JSON.parse(res[0]);
const datalists = json.result.data;
// ここに挿入 //
// 変更された配列をrewriteTbodyに渡す
rewriteTbody(datalists);

const total = datalists.reduce((acc, cur) => acc + 1, 0);
document.querySelector(“#moviemanager_total”).textContent = total.toLocaleString();
};
};
/----------------/

さて、値にURLが含まれているので[添付画像の変更前]のように表示されてしまいます。

そこで上記のここに挿入というところに以下のようにanchorタグやbuttonタグを入れてみました。

const datalists = json.result.data;
/------------------/
// 新しい配列変数を準備
const modifiedDataLists = datalists.map(item => {
const modifiedItem ={…item, B0005: ‘<button onclick="location.href=’+ “'” + item.B0005 + “'” + ‘">ここ’};
return modifiedItem;
});

// 新しい配列変数を準備
const modifiedDataLists2 = modifiedDataLists.map(item => {
const modifiedItem2 = {…item, B0006: ‘そこ’};
return modifiedItem2;
});

// 変更された配列をrewriteTbodyに渡す
rewriteTbody(modifiedDataLists2);
// rewriteTbody(datalists);
/----------------------/

しかし、変更後のようにタグがそのまま表示されてしまいました。
そもそもJavaScriptをよくわかっていないのですが、リンクを貼ったページにしたいのですが、どうすればできるのでしょうか？

[ko_ji]

こんにちは。

textContent の代わりに、innerHTML を利用するとうまく表示できるかもです。

Node: textContent プロパティ - Web API | MDN

【JavaScript】HTMLのテキスト内のURLをリンクに置き換える方法

[yos (吉田昌二)]

ko_jiさん、ありがとうございます。

textContentもinnerHTMLも理解できないまま、今日もずっとデバッグしながら中身を見ていたのですが、一番下でrewriteTbody()しているこの中身はどこにあるんだろう？と探していると以下のソースが見つかりました。

const rewriteTbody = (rows) => {
  for (const row of rows) {
    const tr = tbody.insertRow();
	for (const item of items) {
	  const column = item.column;
	  const td = tr.insertCell();
	  const text = document.createTextNode(row[column]);
	  td.appendChild(text);
    }
  }

};

これのdocument.createTextNode()してるのが文字列になってしまう原因ですかね？
これをどう変えればいいのでしょうか？

[ko_ji]

document.createTextNode() の利用自体は問題ないかと思います。

最初に記載いただいている処理の、以下コードで利用している textContent は、
値が HTML として解析されないのでタグ設定しても無視されていると思います。

※ 私も HTML の知識があまりないので、間違っていたらすみません。

document.querySelector(“#moviemanager_total”).textContent = total.toLocaleString();

なお、要素にリンクを追加する処理については、以下のページに情報があったので、
参考に処理修正すると思った動作が可能かと思います。
https://jsnotebook.sudalab.net/element02.html

[yos (吉田昌二)]

ko_jiさん、素早い返答ありがとうございました。
参考にいただいたURLでcreateElementの使い方がわかり、以下のようにrewiteTbodyを変更しましたところ、思い通りにリンクできました！！

ありがとうございました。

const rewriteTbody = (rows) => {
  for (const row of rows) {
    const tr = tbody.insertRow();
    for (const item of items) {
	  const column = item.column;
	  const td = tr.insertCell();
	  if (column == 'B0005' || column == 'B0006') {
	    const text2 = document.createElement("a");
	    text2.href = row[column];
	    text2.innerText = "リンク";
	    text2.target = "_blank";
	    td.appendChild(text2);
	  } else {
	    const text = document.createTextNode(row[column]);
	    td.appendChild(text);
	  }
    }
  }

};