JavaScriptでJSON内の「\n」を改行にし、ウェブページに表示したい
ウェブアプリからJSONデータをfetchし、それを配列に変換した後createElementでhtml要素を作成。
それを「親要素.appendChild」という形で追加するようにしている。
以下がソースコード。(本来はもう少し長く、問題に関係ない処理を省いている。)
fetch.js
const url = "ウェブアプリのURL";
let messages = [];
function load() {
fetch(url)
.then(response => response.json())
.then(data => {
data.forEach(entry => {
let x = entry.msg
messages.push(x); // ＊ここ
}
for (let i = messages.length - 1; i > -1; i--) {
let newTrElement = document.createElement("tr");
let newTdElement = document.createElement("td");
newTdElement.appendChild(document.createTextNode(messages[i]));
newTrElement.appendChild(newTdElement);
// 本来はほかにもhtmlに追加するtd要素(msg以外の、例えば日付など)があり、
// 二重ループになっているが、原因はそこではないと思うので、略。
document.getElementById("親要素tableのid").appendChild(newelement);
}
}
実現したいこと
改行(\n)を含む文字列をそのまま表示すると、ページ上で改行されず、
あ い う
と表示される。
理想は
あ
い
う
と表示されること。
試したこと
11行目の＊の場所を
messages.push(x) から messages.push(x.replaceAll("\n","<br>")) に変更。
結果は、ページ上に
あ<br>い<br>う
と表示されるだけ。
</br> や <br /> にしても効果なし。
0 likes
