CODEWITHSUNDEEP
javascripthtml
Jae_JPN
Jae_JPN

Reputation: 19

Cannot read properties of the Dataset

I have been scratching my head with this problem, it wont read the data inside the json file, it says this error

Uncaught TypeError: Cannot read properties of undefined (reading 'Messages')
at showDataset (Week 11 Assignment.html:38)
at onload (Week 11 Assignment.html:83)

showDataset @ Week 11 Assignment.html:38 onload @ Week 11 Assignment.html:83

<!DOCTYPE html>
<head>
<meta charset="utf-8">
    <script>
        var i=0;
        
        var xmlhttp;
        var Quotes;

        function loadJSON()

        {

          xmlhttp = new XMLHttpRequest();
          xmlhttp.onreadystatechange = HandleData;


          xmlhttp.open("GET","Quotes.json", true);
          
        xmlhttp.send();
        }
          

        function HandleData()
        {
          
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
         
           {   
             Quotes = eval('(' + xmlhttp.responseText + ')');
             showDataset();
           }
        }

        function showDataset()
        {
            var x
            for (x = 0; x < Quotes.Messages.length; x++)
            {
                let p = document.createElement('p')

                p.innerHTML = "<p>"+ Quotes.Messages[x].datetime + " : "+ Quotes.Messages[x].Note + " By : " + Quotes.Messages[x].Username + "</p>";
                if(i % 2)
                {
                    p.style.background = "yellow";
                }
                i++;
                document.body.appendChild(p);
            }
        }

        function createParagraph()
        {
            var someText = document.getElementById('someText').value; 
            let p = document.createElement('p');
            time = getTime()  
            date = getDate()
            p.innerHTML = "<p>"+ date + time + someText + " By : " + Quotes.Messages[0].Username +"</p>";
                if(i % 2)
                {
                    p.style.background = "yellow";
                }
                i++;
            document.body.appendChild(p);
        }

        function getDate()
        {
            var currentdate = new Date();
            var date = currentdate.getFullYear() + "-" + currentdate.getMonth() + "-" + currentdate.getDate() + " ";
            return date;
        }

        function getTime()
        {
            var currentdate = new Date();
            var time = currentdate.getHours() + ":" + currentdate.getMinutes() +":" + currentdate.getSeconds() + " : ";
            return time;
        }
    </script>
</head>

<body id="page" onload="showDataset()">
Example</br>
Sample Text</br></br>
<input type="text" name="userText" id="someText" onchange="createParagraph()">
</body>

</html>

This is the Json file dataset, it supposed to print out the time, note and username on the

Function ShowDataset()

I have no clue about this because all of the code i think is right, i am fairly new to javascript and codding

Messages : [   
            { "Time" : "1", "Note" :"2" , "Username" : "3"},
            { "Time" : "11", "Note" :"21", "Username" : "31"}
            { "Time" : "12", "Note" :"22", "Username" : "32"}
           ]

Upvotes: 0

Views: 3075

Answers (1)

Thibaud
Thibaud

Reputation: 1095

The variable Quote is undefined and you tried to read the property Messages of undefined. That's why you have the Error. Now I can tell you you have this because when the body is loaded you immediatly trigger showDataset().

Instead you should do this in your html

<body id="page" onload="loadJSON()">
Example</br>
Sample Text</br></br>
<input type="text" name="userText" id="someText" onchange="createParagraph()">
</body>

here you will load the json and you methode already call the good function when it's done ;)

else you tried to read data that hasn't be initiated.

Upvotes: 1

Related Questions