2016-12-14 5 views
-1

これは自分のHTMLに表示されない理由を理解できません。javascriptでjsonにアクセスし、htmlで表示する

私は私はどこを把握することができないよう、以下の例...

https://www.mkyong.com/javascript/how-to-access-json-object-in-javascript/

http://www.w3schools.com/js/js_json_intro.asp

How to access JSON in JavaScript

Accessing Json in Javascript

を追ってきました間違っている。

これは、私は現在、起こって持っているものです:

window.onload = function() { 
    var json = { "year" : "2016", 
     "months" : [ {"July"}, {"August"}, {"September"} ], 
     "days" : [ {02}, {03}, {14}, {18}, {10}, {19} ], 
     "event" : [ {"Fitness assessment"}, {"Pathology-Uric Acid"}, {"Consultation-General and angiogram"}, {"Medication-Asperlone"}, {"Medication-Celestamine"}, {"Fitness assessment"} ] 
    }; 

    var obj = JSON.parse(json); 
    document.getElementById("month").innerHTML = obj.months[0]; 
    document.getElementById("day").innerHTML = obj.days[0]; 
    document.getElementById("event").innerHTML = obj.event[0]; 
    document.getElementById("day2").innerHTML = obj.days[1]; 
    document.getElementById("event2").innerHTML = obj.event[1]; 
    document.getElementById("month2").innerHTML = obj.months[1]; 
    document.getElementById("day3").innerHTML = obj.days[2]; 
    document.getElementById("event3").innerHTML = obj.event[2]; 
    document.getElementById("day4").innerHTML = obj.days[3]; 
    document.getElementById("event4").innerHTML = obj.event[3]; 
    document.getElementById("day5").innerHTML = obj.days[4]; 
    document.getElementById("event5").innerHTML = obj.event[4]; 
    document.getElementById("month3").innerHTML = obj.months[2]; 
    document.getElementById("day6").innerHTML = obj.days[5]; 
    document.getElementById("event6").innerHTML = obj.event[5]; 
}; 

HTMLスニペット:

<div class="row liketablerow"> 
    <div class="col-xs-2"> 
     <h4 id="day"></h4> 
    </div> 
    <div class="col-xs-2"> 
     <img src="images/icon-fitness.png" class="fitness" > 
    </div> 
    <div class="col-xs-2"> 
     <p id="event"></p> 
    </div> 
</div> 

すべての有益なコメントが参考にされている、ありがとうございました。

+0

アクセスして値を設定しようとしているHTMLスニペットの要素は表示されません。それらの要素はhtmlにありますか? – Tushar

+0

h4タグとpタグのinnerHTML – Indya

+0

また、配列内の値を{}で囲む必要があります。 {と}は、{color: 'red'}のようなキーと値が必要なオブジェクトを示すために使用されます。そこに1つの値しかない場合は、エラーが発生します。コンソールでこれを実行しようとすると、エラーが表示されます。 – raphael75

答えて

0

あなたのJSONオブジェクトがあります有効ではない、あなたはcurlyを使用していますjson notationを使用してそれを行うには正しい方法ではありません、あなたの配列内の文字列のためのブラケットは、ここでどのようにすべきである:

var json = { 
    "year" : "2016", 
    "months": ["July", "August", "September"], 
    "days": [02, 03, 14, 18, 10, 19], 
    "event": ["Fitness assessment", "Pathology-Uric Acid", "Consultation-General and angiogram", "Medication-Asperlone", "Medication-Celestamine", "Fitness assessment" ]}; 
1

"JSON"は実際にはJSONではありません。これはJavaScriptオブジェクトです。そのため、JSON.parseは何もしません(休憩を除く)。すでに必要な形式になっています。

 var obj = { "year" : "2016", 
     "months" : [ {"July"}, {"August"}, {"September"} ], 
     "days" : [ {02}, {03}, {14}, {18}, {10}, {19} ], 
     "event" : [ {"Fitness assessment"}, {"Pathology-Uric Acid"}, {"Consultation-General and angiogram"}, {"Medication-Asperlone"}, {"Medication-Celestamine"}, {"Fitness assessment"} ] }; 

^^ obj

への変更は、JSONとJSオブジェクトリテラルの間で異なるため、ここを参照してください:

0

javascriptオブジェクトの表記が間違っているようです。あなたのイベントのJSオブジェクト構文は、以下のようになります。

var json = { "year" : "2016", 
     "months" : [ "July", "August", "September" ], 
     "days" : [ 02, 03, 14, 18, 10, 19 ], 
     "event" : [ "Fitness assessment", "Pathology-Uric Acid", "Consultation-General and angiogram", "Medication-Asperlone", "Medication-Celestamine", "Fitness assessment" ] 
    }; 
関連する問題