JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<h1> Inserting our JSON Data into and object</h1>

<p> First,we are creating an array to store our data.We are then creating an object with couple of objects inside the object "ListofStudents" </p>
<h2>Traversing the ListofStudents.</h2>
    <p>We are creating a variable called output inside for statement to store the data temporarily.we are then using the variable to populate the Div "GraduationList".</p>
<h3><b> Output of this code is: </b></h3>
    <br></br>
<div id="GraduationList"></div>

JavaScript

//an array is stored with brackets[]
//object in JSON is stored with curly braces {}

//To organize our data we are creating an object called "ListofStudents".This object has couple of other objects inside {}
var data={"ListofStudents":[
            {
                "firstName":"Robert",
                "lastName":"Fuller",
                "Graduated": {
                    "Year":2008,
                    "Department":"ComputerScience",
                    "Grade":"B"
                }
            },
            {
                "firstName":"Thomas",
                "lastName":"Rivard",
                "Graduated": {
                    "Year":2007,
                    "Department":"Physics",
                    "Grade":"A"
                }
            }
    ]}

document.getElementById("GraduationList").innerHTML=data.ListofStudents[0].firstName + " " + data.ListofStudents[0].lastName+"--"+ data.ListofStudents[0].Graduated.Year +"--" +data.ListofStudents[0].Graduated.Department +"--"+data.ListofStudents[0].Graduated.Grade;
 
//Traversing the ListofStudents 
//I am using  a for statement and creating  a variable called output to temporarily store the data.We use the output variable to populate the GraduationList Div.

var output="<ul>";
    for (var i in data.ListofStudents) {
        output+="<li>" + data.ListofStudents[i].firstName + " " + data.ListofStudents[i].lastName + "--" + data.ListofStudents[i].Graduated.Year+"--" +data.ListofStudents[0].Graduated.Department +"--"+data.ListofStudents[0].Graduated.Grade+"</li>";
    }
    output+="</ul>";

    document.getElementById("GraduationList").innerHTML=output;