Is it possible to link to a .json file stored on my server and then create a template for it?

I have set up a Webserver on kasserver.com, and I have a PHP script that retrieves data from an API every 15 minutes and saves it on my Webserver. Now, I am looking to create a template for the saved JSON data, but I am having trouble accessing it locally.

handleEvents('test', "./json/tester.json");

function handleEvents(id, link) {
    fetch(link).then(res => {
    res.json().then(
        t => {
            if (t.length > 0) {
                let output = "";
                for(let i=0, len = t.length; i < len; i++) {
                    output = data[i].person;
                }


                document.getElementById(id).innerHTML =  output;
            } else {
                document.getElementById(id).innerHTML = "<div>Currently, no detailed information is available</div>";
            }
        }
    )});
}

However, the script is attempting to fetch a local URL instead of retrieving the data from the Webserver. I haven't been able to figure out how to fetch a local JSON file on my server yet.

Answer №1

Accessing the server's local location from the client-side is not possible. If your file is in a public directory on the PHP server, you can access it using the full URL with the domain.

function handleEvents(id, link) {
  fetch(`https://${location.hostname}${link}`)
  .then(res => {
    // ...
    // ...
  }
}
handleEvents('test', '/json/tester.json')

Therefore, make sure to structure your function as shown above.

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 retrieve the ID value for specific keys from a .json file in python while utilizing the keys for referencing?

Hello, I am new to Python and seeking advice on how to proceed with extracting the 'id' values for keys from a .json file in Python. Right now, I am trying to compare the key using an 'if' condition but unsure how to retrieve the releva ...

Is it possible to toggle the status of an item in JSON based on a counter value

Here is the JSON data I have: "questions": { "id": 1, "question": "Select one color", "answers": [ {"id": 1, "answer" : "Green", "isSelected" : false}, {"id": 2, "answer": "Red", "isSelected" : false}, ...

Dealing with Jquery AJAX requests to NLB and navigating the challenges of cross-domain scripting restrictions

I am currently working on a dashboard application that utilizes Jquery AJAX calls to interact with a RESTFUL WCF service. Everything runs smoothly when the UI application and service are on the same server. However, due to issues with cross site scripting ...

Numerous navigable tabs all on a single page

After following a tutorial on YouTube to create scrollable tabs, I successfully implemented it using Bootstrap 5. However, I'm facing challenges in getting multiple scrollable tabs to function on a single page. Although the tabs and tab-content are fu ...

The initial dropdown menu in PHP coupled with Javascript fails to retain my chosen option

As a novice PHP programmer, I successfully created a double drop-down list from a MySQL database. The idea is to choose a claims hub in the first box and then select an attorney associated with that specific hub in the second box. However, I am facing an ...

What is the best way to send a message to only one specific client using socket.io instead of broadcasting to everyone?

After thoroughly researching the documentation, I am still unable to find a solution. My goal is to send data to a specific client or user instead of broadcasting it to everyone. I have come across other inquiries regarding this issue, but most either rem ...

How can we limit the files served from an Express static directory to only .js files?

I'm curious to know if it's doable to exclusively serve one specific type of file (based on its extension) from an Express.js static directory. Imagine having the following Static directory: Static FileOne.js FileTwo.less FileThree. ...

The performance implications of implicit returns in Coffeescript and their effects on side effects

Currently, I am developing a node.js web service using Express.js and Mongoose. Recently, I decided to experiment with CoffeeScript to see if it offers any advantages. However, I have come across something that has left me a bit unsettled and I would appre ...

The AddClass function fails to function properly after an ajax form is submitted

I am facing a challenge in setting up validation for my ajax form. My goal is to have a red border appear around the input field if it is submitted empty. Unfortunately, when I try to use addClass(), it does not seem to have any effect. The alert message ...

The alert box for model validation summary errors is deactivated when hidden using .hide() method

In my MVC web application form, there is an optional postcode finder. If there is no match for the entered postcode, I add a custom error message to the .validation-summary-errors section. After the error is fixed, I remove all instances of the postcode cl ...

Obtaining a file that includes a selection of documents that correspond to a specific search criteria, along with the overall number of

Is it possible to query a collection to retrieve both a limited number of documents matching a query and the total amount of documents that match the query at the same time? This is the desired result: { result : [ { _id:null, ...

Differentiating between JsonObject and JsonArray with Gson

When it comes to validating JSON strings, my Gson-powered validator does a great job with JSON objects but struggles when it encounters JSON arrays. JsonStringValidator public class JsonStringValidator implements ConstraintValidator<JsonString, String& ...

Removing elements based on the size of the display

I need assistance with a JavaScript issue. I have a table with 2 rows and 5 columns, each column representing a day of the week with a specific class. The goal is to detect the current day based on the browser's width/height and remove all elements in ...

What is the best way to incorporate a dropdown menu into existing code without causing any disruption?

I've come across this question multiple times before, but I still haven't found a suitable answer or solution that matches my specific situation. (If you know of one, please share the link with me!) My goal is to create a basic dropdown menu wit ...

Learn how to remove data from a React JS application without causing a page refresh by utilizing the useLoaderData() function in conjunction with React Router

I am working on preventing my table from refreshing with the new version of userLoadData from react-router-dom@6 after deleting some data. In an attempt to achieve this, I created a function called products() within useLoaderData. While this function succ ...

What is the variance in performance between the sx prop and the makeStyles function in Material UI?

I recently started delving into Material UI and learned that it employs a CSS in JS approach to style its components. I came across 2 methods in the documentation for creating styles: First, using the sx prop: <Box sx={{ backgroundColor: 'green& ...

What is the best way to ensure the constant rotation speed of this simple cube demo?

Currently delving into the world of Three.js. I'm curious about how to make the cube in this demo rotate at a consistent speed rather than depending on mouse interactions. Any tips on achieving this? ...

Tips for organizing an array with specific conditions

I need help sorting an array in PHP based on certain conditions. Below is the sample array: $array = [ [ "a" => 4, "b" => 8, "c" => 1 ], [ "a" => 9, "b" => 4, "c" => 0 ], [ "a" => -9, "b" => -4, "c" => 1 ], ]; ...

What is the best way to set a fixed width for my HTML elements?

I am facing an issue with my user registration form where error messages are causing all elements to become wider when they fail validation. I need help in preventing this widening effect. How can I achieve that? The expansion seems to be triggered by the ...

Vue component fails to react to updates from Vuex

Currently, I am developing a system to facilitate the management of orders at a shipping station. Although I have successfully implemented the initial changes and most of the functionality, I am encountering an issue where one component fails to update ano ...