前提・実現したいこと
Python3の簡易サーバーを利用してローカルに保存したJSONファイルをJavascriptで取得しHTMLに動的に組み込みたいです。
発生している問題・エラーメッセージ
JSONの取得、JSONのパース、HTMLへの動的組み込みのそれぞれの処理単体では動いているのですが、一つにまとめた際に上手く動きません。
chromeのJavascriptコンソールでもエラーが表示されないため、原因がつかめないでいます。
該当のソースコード
Javascript
1function cal(){ 2 3 var httpObj = new XMLHttpRequest(); 4 httpObj.open("get", "http://0.0.0.0:8000/cgi-bin/json/dash_dash.json", true); 5 httpObj.onload = function (){ 6 var objobj = ''; 7 var myDash = JSON.parse(this.responseText); 8 for (var foo in myDash){ 9 for (var num in myDash[foo]){ 10 objobj += '<span class="event_foo" style="color:' + myDash[foo][num]["color"] + ';">' + myDash[foo] + '</span><span class="event_time">' + myDash[foo][num]["begin_time"] + '</span><span class="event_name">' + myDash[foo][num]["event"] + '</span>' 11; 12 }} 13document.getElementById("calendar") += objobj; 14return; 15} 16}
Json
1{ 2 "user_1": { 3 "7": { 4 "begin_date": "2019/01/11", 5 "begin_time": "22:02", 6 "event": "テスト", 7 "color": "#ffff00" 8}, 9 "8": { 10 "begin_date": "2019/01/11", 11 "begin_time": "21:59", 12 "event": "テスト", 13 "color": "#ffff00" 14} 15}, 16 "user_2": { 17 "10": { 18 "begin_date": "2019/01/11", 19 "begin_time": "16:06", 20 "event": "テスト", 21 "color": "##ff8eff" 22} 23} 24}
HTML
1<head> 2<meta charset="utf-8"/> 3<link rel="stylesheet" type="text/css" href="../css/Main_2.css" /> 4<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&subset=japanese" rel="stylesheet"> 5<script src="../css/calendar.js"></script> 6</head> 7<body> 8<div id="calendar"></div> 9</body>
試したこと
JS BINというサイトで以下のように試したところでは動いたのでそのまま、実際の環境においてみましたが動きませんでした。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>JS Bin</title> 7</head> 8<body> 9 10 <div id="cal"></div> 11</body> 12</html>
javascript
1var jsondata = { 2"user_1": { 3 "7": { 4 "begin_date": "2019/01/11", 5 "begin_time": "22:02", 6 "event": "テスト", 7 "color": "#ffff00" 8}, 9 "8": { 10 "begin_date": "2019/01/11", 11 "begin_time": "21:59", 12 "event": "テスト", 13 "color": "#ffff00" 14} 15}, 16"user_2": { 17 "10": { 18 "begin_date": "2019/01/11", 19 "begin_time": "16:06", 20 "event": "テスト", 21 "color": "##ff8eff" 22} 23} 24} 25var objobj = document.getElementById("cal"); 26 for (var foo in jsondata){ 27 for (var num in jsondata[foo]){ 28 //テストなのでeventのみ 29 objobj.innerHTML += "<span>"+jsondata[foo][num]["event"]+"</span><br>";}}
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー