No error reported upon trying to render json output

Question

No error reported upon trying to render json output

I'm having an issue where the following code is not displaying any output. Can someone help me identify what mistake I might be making?

This is the HTML file:

<head>
<script type = "text/javascript">
function ajax_get_json() {
    var hr = new XMLHTTPRequest();
    hr.open("GET", "mylist.json", true);
    hr.setRequestHeader("Content-type: application/json", true);

    hr.onreadystatechange = function() {
        if (hr.readyState == 4 && hr.status == 200) {
            var data = JSON.parse(hr.responseText);
            var results=document.getElementById("results");
            results.innerHTML = data.user;
        }
    }
    
    hr.send(null);
    results.innerHTML = "requesting...";
} 
</script> 
</head>

<body>

    <div id="results"></div>
    <script type = "text/javascript">ajax_get_json();</script>

</body>

And here is the JSON file content: { "user":"John", "age":22, "country":"US" }

javascript json

Answer 1

Answer №1

XMLHTTPRequest() should actually be written as XMLHttpRequest(). Here is a snippet of the JavaScript code:

function request() {}

request();

The HTML part looks like this:

<script src="file.js"></script>

When you use

var data = JSON.parse(hr.responseText);

, you are dealing with an object. You can iterate through the object using:

for(var key in obj) {}

and then display both the key and obj[key] in the innerHTML to see the result. Here is the complete JavaScript file:

function request() {
  var hr = new XMLHttpRequest();
  hr.onreadystatechange = function() {
    if (hr.readyState == 4 && hr.status == 200) {
      var data = JSON.parse(hr.responseText); // object
      var results = document.getElementById("results");
      results.innerHTML = "";
      for(var key in data) {
        results.innerHTML += key + " " + data[key] + "<br>";
      }

    }
  }
  hr.open("GET", "mylist.json", true);
  hr.send();
  results.innerHTML = "requesting...";
}

request();

(Make sure to provide specific titles for your questions - How to ask)

Answer 2

XMLHTTPRequest() should actually be written as XMLHttpRequest(). Here is a snippet of the JavaScript code:

function request() {}

request();

The HTML part looks like this:

<script src="file.js"></script>

When you use

var data = JSON.parse(hr.responseText);

, you are dealing with an object. You can iterate through the object using:

for(var key in obj) {}

and then display both the key and obj[key] in the innerHTML to see the result. Here is the complete JavaScript file:

function request() {
  var hr = new XMLHttpRequest();
  hr.onreadystatechange = function() {
    if (hr.readyState == 4 && hr.status == 200) {
      var data = JSON.parse(hr.responseText); // object
      var results = document.getElementById("results");
      results.innerHTML = "";
      for(var key in data) {
        results.innerHTML += key + " " + data[key] + "<br>";
      }

    }
  }
  hr.open("GET", "mylist.json", true);
  hr.send();
  results.innerHTML = "requesting...";
}

request();

(Make sure to provide specific titles for your questions - How to ask)

No error reported upon trying to render json output

Answer №1

Similar questions

"Jest test.each is throwing errors due to improper data types

Is there a way to identify and remove empty spaces and carriage returns from an element using JavaScript or jQuery?

Traversing through elements with unique IDs in SwiftyJSON that are not part of an array

What steps can be taken to activate a class upon a click event?

Halt! There is a Syntax Error: anticipating an expression, but instead received the keyword 'for'

What is the reason behind caching form data in an ajax call?

Interactive quiz program based on object-oriented principles

What is the proper way to provide parameters in a GET request using Axios?

What is causing the issue with useForm not being identified as a function?

The ESLint rule "eqeqeq" configuration is deemed incorrect

Add a checkbox element to a web API using ReactJS

Ensuring the security of a PHP application hosted on a Compute Engine virtual machine to connect with Google Cloud Storage (G

Displaying content on a webpage using PHP, AJAX, and HTML

How can you utilize a previously opened window from another page in JavaScript?

Is it possible to delete an element from an HTML form?

IE8 - "object does not exist or is undefined" error

Is there a way to implement request-specific global variables for individual websocket connections in a Node.js application, similar to using res.locals for

What is the most effective way to send multiple values through the <option> value attribute?

Implementing hover effect triggered by keyboard input

Creating a stunning HTML 5 panorama with GigaPixel resolution