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
– Tushar, Commented Dec 14, 2016 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
– raphael75, Commented Dec 14, 2016 at 13:36

Community · Accepted Answer · 2017-05-23 12:08:45Z

1

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:

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Dec 14, 2016 at 13:27

Scimonster

33.4k10 gold badges79 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mustapha Alaouy · Accepted Answer · 2016-12-14 13:35:54Z

0

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

answered Dec 14, 2016 at 13:35

Mustapha Alaouy

1211 silver badge4 bronze badges

Comments

Tushar · Accepted Answer · 2016-12-14 13:36:39Z

0

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

answered Dec 14, 2016 at 13:36

Tushar

3,0822 gold badges28 silver badges27 bronze badges

Collectives™ on Stack Overflow

Accessing json in javascript and displaying it in html

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related