Q&A
body の中に div を入れてその中を書き換えたらいいんじゃないでしょうか。
また、JSON の取得と書き換えは別の処理にあたるので、ごちゃまぜにせず別に作って順に試したほうが作りやすいです。
前提・実現したいこと
javascriptでサーバからjsonファイルを取得しhtmlで表示しようとしています。
htmlの一要素として表示したいと考えています。
発生している問題・エラーメッセージ
以下のコードで試しているのですが、全画面が置き換わってしまい「Hello World!」が表示されません。
該当のソースコード
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta http-equiv="content-type" charset="utf-8"> 5 <script> 6 function getJSON(){ 7 var request = new XMLHttpRequest(); 8 request.open('GET', 'http://localhost/', true); 9 request.responseType = 'json'; 10 request.onload = function () { 11 var data = this.response; 12 document.write('<h1>JSON TEST</h1>'); 13 for (var i = 0; i < data.length; i++){ 14 document.write('<ul>'); 15 document.write('<li>'); 16 document.write(data[i].name + '<br />'); 17 document.write('</li>'); 18 document.write('</ul>'); 19 }; 20 }; 21 request.send(); 22 }; 23 </script> 24 </head> 25 26 <body> 27 Hello World!<br> 28 <script> 29 getJSON(); 30 </script> 31 </body> 32</html>
試したこと
scriptタグ内のonloadを外してみたり、getJSON();部分をdocument.writeで囲ってみたりしてみましたが、いずれもダメでした。
回答2件
0
Document.write() - Web API | MDN
このリンクの注意書きを参照してみてください。
単に文章を追加するのであれば、document.writeを使うべきではありません。
以下リンクも参考にしてみてください。
投稿2020/09/27 03:51
編集2020/09/27 04:00
総合スコア23
0
document.writeはよほどのことがない限りつかってはいけません
具体的なjsonデータがないので正確な回答がしづらいですね
javascript
1<script> 2const getJSON=async()=>{ 3 const url="my.json"; 4 const data=await fetch(url).then(res=>res.json()); 5 const body=document.querySelector('body'); 6 body.append(Object.assign(document.createElement('h1'),{textContent:"JSON TEST"})); 7 const lis=data.map(x=>Object.assign(document.createElement('li'),{textContent:x.name})); 8 body.append( 9 lis.reduce((x,y)=>(x.append(y),x),Object.assign(document.createElement('ul'))) 10 ); 11}; 12window.addEventListener('DOMContentLoaded', ()=>{ 13 getJSON(); 14}); 15</script> 16Hello World!<br>
- my.json
json
1[ 2{"name":"aaa"}, 3{"name":"bbb"}, 4{"name":"ccc"} 5]
投稿2020/09/27 02:55
編集2020/09/27 03:25
総合スコア114769
あなたの回答
tips
プレビュー
