Matthew Schmitt Matthew Schmitt - 2 months ago 13
HTML Question

How to display JSON file on HTML page

I'm starting to learn javascript. I want to display the first and last names and relation value on an html page when a user click a button. I have a simple JSON file called FamilyAndFriends.json:

{
"people":[{"fname":"Adam",
"lname":"Schmitt",
"relation":"Brother",
"relationid":"1"
},
{"fname":"Andrew",
"lname":"Name",
"relation":"Brother",
"relationid":"1"
},
{"fname":"Jenna",
"lname":"Name",
"relation":"Wife",
"relationid":"2"
},
{"fname":"Gary",
"lname":"Name",
"relation":"Father",
"relationid":"3"
},
{"fname":"Judy",
"lname":"Name",
"relation":"Mother",
"relationid":"4"
},
{"fname":"Justin",
"lname":"Name",
"relation":"Friend",
"relationid":"5"
},
{"fname":"Billy",
"lname":"Name",
"relation":"Friend",
"relationid":"5"
},
{"fname":"Robbie",
"lname":"Name",
"relation":"Friend",
"relationid":"5"
},
{"fname":"Dylan",
"lname":"Name",
"relation":"Friend",
"relationid":"5"
},
{"fname":"Zach",
"lname":"Name",
"relation":"Friend",
"relationid":"5"
}]
}


I tried searching and it seems a lot of people suggest jquery but we are not to jquery at the moment. How would I be able to get the info from my .json file and display it in my html file when the user clicks?
Thanks for the help

Answer

HTML code:

<ul id="list"></ul>

Just keep your JSON data in a variable (or) separate file as 'FamilyAndFriends.json'.

var data = {
"people":[{"fname":"Adam",
    "lname":"Schmitt",
        "relation":"Brother",
        "relationid":"1"
    },
    {"fname":"Andrew",
    "lname":"Name",
        "relation":"Brother",
        "relationid":"1"
    },
    {"fname":"Jenna",
    "lname":"Name",
        "relation":"Wife",
        "relationid":"2"
    },
    {"fname":"Gary",
    "lname":"Name",
        "relation":"Father",
        "relationid":"3"
    },
    {"fname":"Judy",
    "lname":"Name",
        "relation":"Mother",
        "relationid":"4"            
    },
    {"fname":"Justin",
    "lname":"Name",
        "relation":"Friend",
        "relationid":"5"            
    },
    {"fname":"Billy",
    "lname":"Name",
        "relation":"Friend",
        "relationid":"5"             
    },
    {"fname":"Robbie",
    "lname":"Name",
        "relation":"Friend",
        "relationid":"5"             
    },
    {"fname":"Dylan",
    "lname":"Name",
        "relation":"Friend",
        "relationid":"5"             
    },
    {"fname":"Zach",
    "lname":"Name",
        "relation":"Friend",
        "relationid":"5"             
    }]
 };

Example for external JSON using javascript:

 var request = new XMLHttpRequest();
 request.open('GET', '/my/url', true); // YOUR EXTERNAL JSON URL

 request.onload = function() {
     if (request.status >= 200 && request.status < 400) {
     // Success!
         var data = JSON.parse(request.responseText);
         var link;
         for (var t = 0; t < data.people.length; t++){
             link = document.createElement("a"+t);
             var ulist = document.getElementById("list");
             var newItem = document.createElement("li");
             newItem.appendChild(link);
             ulist.appendChild(newItem);
             link.textContent = 'First Name: '+data.people[t].fname + ', Last Name: ' +data.people[t].lname;
             link.setAttribute('data-ind', t); // ADDED A DATA ATTRIBUTE TO STORE A INDEX VALUE
            if (typeof window.addEventListener === 'function'){
                 (function (_td) {
                      link.addEventListener('click', function(){
                      var indexId = this.getAttribute('data-ind'); //GETTING DATA ATTRIBUTE VALUE
                      indexId =  parseInt(indexId); //PARSE FROM STRING TO INTEGER
                      alert(data.people[indexId].relation); // YOU WILL GET THE ACTUAL RELATION VALUE.

                  });
               })(link);
     }
  }
     } else {
      // We reached our target server, but it returned an error

     }
 };

 request.onerror = function() {
  // There was a connection error of some sort
 };

 request.send();

Example for Internal JSON using javascript:

 var link;
 for (var t = 0; t < data.people.length; t++){
    link = document.createElement("a"+t);
    var ulist = document.getElementById("list");
    var newItem = document.createElement("li");
    newItem.appendChild(link);
    ulist.appendChild(newItem);
    link.textContent = 'First Name: '+data.people[t].fname + ', Last Name: ' +data.people[t].lname;
    link.setAttribute('data-ind', t); // ADDED A DATA ATTRIBUTE TO STORE A INDEX VALUE
    if (typeof window.addEventListener === 'function'){
        (function (_td) {
            link.addEventListener('click', function(){
                var indexId = this.getAttribute('data-ind'); //GETTING DATA ATTRIBUTE VALUE
                indexId =  parseInt(indexId); //PARSE FROM STRING TO INTEGER
                alert(data.people[indexId].relation); // YOU WILL GET THE ACTUAL RELATION VALUE.

            });
        })(link);
     }
  }

Result will be like below when you click the first list:

Brother

Rock it!