Accessing json in javascript and displaying it in html

Question

I can't figure out why this isn't displaying in my HTML.

I've followed the following examples...

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

I can't seem to figure out where I'm going wrong.

This is what I've got going, currently:

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 snippet:

<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>

All helpful comments are helpful, thank you.

I cant see any element in your HTML snippet which you are trying to access and set value to. Do you have those elements in your html ? — Tushar, Dec 14 '16 at 13:29
You also need to get rid of the {'s around the values inside the arrays. The { and } are used to indicate an object, which must have a key and value like {color: 'red'}. If you only have 1 value in there you will get errors. If you try running this in the console you will see the errors. — raphael75, Dec 14 '16 at 13:36

score 1 · Answer 1 · edited May 23 '17 at 12:08

Your "JSON" isn't actually JSON. It's a JavaScript object. As such, JSON.parse won't do anything to it (except break). It's already in the format you need.

        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"} ] };

^^ change to obj

See here for the different between JSON and a JS object literal:

score 0 · Accepted Answer · answered Dec 14 '16 at 13:35

Your json object is not valid, you are using curly brackets for strings in your arrays which is not the correct way to do it using the json notation, here is how it should be :

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" ]};

score 0 · Answer 3 · answered Dec 14 '16 at 13:36

The javascript object notation seems to be wrong. Your events JS object syntax should be below instead :

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" ] 
    };

Accessing json in javascript and displaying it in html

3 Answers3