The Ajax call failed to connect with the matching JSON file

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script 
<script>

function launch_program(){
var xml=new XMLHttpRequest();
var url="student.json";

xml.open("GET", url, true);
xml.send();


xml.onreadystatechange=function(){
if(xml.readyState == 4 && xml.status==200){
var file=JSON.parse(xml.responseText);
var data=document.getElementById("demo"); 
data.innerHTML=file.Name;
}
}
data.innerHTML="Fetching Data..........";
}



</script>
<script>launch_program()</script>
</body>
</html>

Here is the JSON file content:

{"Name":"Arman","ID":1312038;"Department":"NAME"}

I have been attempting to execute this HTML file and retrieve data from the JSON file using an Ajax request. Unfortunately, I am encountering some issues despite saving both files in the same directory. Can anyone provide assistance?

Answer №1

When you set the data.innerHTML to "Fetching Data", keep in mind that at that moment, data is not yet the element because it only becomes the element once the ajax request is complete. This may result in an error being displayed in the console – press F12 to check for any errors.

To fix this issue, try moving the line var data = ... outside of the readystatechange function.

Another issue could be with your JSON format; make sure to replace any instances of ; with commas for proper validation. You can use a tool like JSONLint to validate your JSON code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to establish a connection between the same port on Expressjs and Socket.io

I am currently using Express.js and Socket.io to develop a chat application. Initially, I created my project with Express-Generator and began by running the node ./bin/www script. However, I decided to remove the ./bin/www file and instead combined it wit ...

AngularJS: intercepting custom 404 errors - handling responses containing URLs

Within my application, I have implemented an interceptor to handle any HTTP response errors. Here is a snippet of how it looks: var response = function(response) { if(response.config.url.indexOf('?page=') > -1) { skipException = true; ...

Is dynamic data supported by Next.js SSG?

I'm currently developing a web application with Next.js and I need clarification on how Static generated sites work. My project is a blog that necessitates a unique path for each blog entry in the database. If I were to statically generate my web appl ...

Is there a way to customize the styles for the material UI alert component?

My journey with Typescript is relatively new, and I've recently built a snackbar component using React Context. However, when attempting to set the Alert severity, I encountered this error: "Type 'string' is not assignable to type 'Colo ...

How can I effectively address issues with jqGrid's sorting and paging functionality?

After making changes to the server-side code, it now looks like this: int nm = objects.ToList().Count; if (objects.ToList().Count > 0) return new PagedList(objects, nm, 1, 25, null); else return null; The JSON data has been updated as follows ...

The contrast between FormData and jQuery's serialize() method: Exploring the distinctions

Recently I came across a situation where I needed to submit a form using AJAX. While researching the most efficient method, I discovered two popular approaches - some developers were utilizing jQuery#serialize() while others were opting for FormData. Here ...

Retrieving JSON data and showcasing it in HTML components

I'm attempting to retrieve JSON responses and showcase them within my predetermined HTML elements. I'm utilizing graphql from datocms. The API explorer displays the following for my model: query MyQuery { allNews { id newsTitle new ...

Cannot utilize the subscribed output value within the filter function

I am in need of assistance with my Angular 7 project. I have successfully implemented a service to call a Json file and output an object array. However, I am facing an issue when trying to filter the objects in the array based on a specific property called ...

I have implemented a button in PHP and now I am looking to invoke a function when that button is clicked

I have a PHP-generated HTML button and I'm having trouble calling the mybtn3() function when it is clicked. The button code looks like this: echo"<td width=14% align=center><input type=button value=Export onclick=mybtn3() /></td>"; ...

Exploring the Utilization of FormData and form.serialize within the Data Parameter of Ajax Jquery

My form includes a multiupload uploader for files, structured like this : <div class="col-md-4"> <div class="form-group"> <label class="control-label col-md-3">Location</label> <div class="col-md-9"> <?php ...

Can anyone provide guidance on utilizing JSON with jQuery for reading purposes?

{ "Joining_date":[ "From Date should not be empty." ], "End_date":[ "To Date should not be empty." ], "Company_name":[ "Company name is required." ], "Job_title":[ "Designat ...

The instance does not have a defined "key" property or method in this Vue/Laravel application

When I attempt to delete a register in my application, I encounter a Vue-warn message: The property or method "key" is referenced during render but is not defined on the instance. Make sure that this property is reactive by initializing it in the data o ...

What methods can I utilize to expand the qix color library with personalized manipulation features?

Utilizing the qix color library, my goal is to create specific custom manipulation functions for use in a theme. The approach I am taking looks something like this: import Color from 'color'; const primary = Color.rgb(34, 150, 168); const get ...

Tips for Retrieving Html Element Attributes Using AngularJS

Update: Even though the discussion veered off track, the main question still stands - how can I access an attribute of an HTML element within an Angular controller? Check out my attempt on Plnkr: http://plnkr.co/edit/0VMeFAMEnc0XeQWJiLHm?p=preview // ...

The json_decode function results in a null value

I save encrypted collections in a database, but when I attempt to decipher them, they come back as null. [{"id":13,"qty":"1"}] The arrays are encrypted using PHP, so I am unsure of what the issue could be. Appreciate any help. ...

Is this a problem with npm or JavaScript?

Hi everyone, I'm trying to figure out if this issue is related to JavaScript or npm. If there's a problem with my JS code, could someone please help me identify it? PLEASE NOTE I used some code to get the current uid from Firebase. I'm ...

Express: router.route continues processing without sending the request

I've implemented the following code in my Express application: var express = require('express'); // Initializing Express var app = express(); // Creating our app using Express var bodyParser = require(' ...

Discover the Secrets of Securing User Authentication in AJAX-based WCF Service Calls

I am currently working on a WCF service that requires client-side (ajax) calls. I am considering two options: either using ScriptManager on the ASPX page to add a ServiceReference to the WCF service, or making JQuery ajax calls directly to the WCF servic ...

Is there a method in JavaScript to access the object to which a function was originally bound?

I have a curiosity about making the code below function properly, capturing the logging as instructed in the comments. function somePeculiar(func) { var funcThis = undefined; // Instead of undefined, how can we access // ...

What are the ways to enable VS Code's Intellisense to collaborate with AngularJS's injected services?

Hey, I've been trying to get Visual Studio Code to provide me with its intellisense for my unique framework (not Angular) app's services. Although I managed to get the standard type for such frameworks, I'm struggling to find a solution for ...