JavaScript JSON URL causing malfunction in counter

There is a JSON file called json.json in the directory. It contains the same data as the var json shown below, but for some reason it is not working when attempting to pull from the URL also saved in the same directory.

<script>
//var json = '{"Id": "0001","Type": "Type","Theme": "Default","Auto": "True","Countdown": 600,"Timer": 480000,"Max": 5,"List":{ "Names":[{"Name":"Name 9", "Account": "1009", "IsWinner":"False"},{"Name":"Name 10", "Account": "1010", "IsWinner":"False"},{"Name":"Name 11", "Account": "1011", "IsWinner":"False"},{"Name":"Name 12", "Account": "1012", "IsWinner":"False"},{"Name":"Name 13", "Account": "1013", "IsWinner":"False"},{"Name":"Name 14", "Account": "1014", "IsWinner":"False"},{"Name":"Name 15", "Account": "1015", "IsWinner":"False"}]}';
   
    var json = 'json.json'
    obj = JSON && JSON.parse(json) || $.parseJSON(json);

var seconds = obj.Countdown;
function secondPassed() {
    var minutes = Math.round((seconds - 30)/60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;  
    }
    document.getElementById('feed').innerHTML = minutes + ":" + remainingSeconds;
    if (seconds == 0) {
        clearInterval(countdownTimer);
        document.getElementById('feed').innerHTML = "00:00";
    } else {
        seconds--;
    }
}

var countdownTimer = setInterval('secondPassed()', 1000);

</script>

Answer №1

To retrieve your JSON file, you will need to perform a XHR (XMLHttpRequest) using Jquery for a cross-browser compatible AJAX request.

Check out the DEMO here

Here's a basic example:

$.get(url, function(JSON){dowhatyouwantwith(JSON)});

For more information, click here

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

Encountering a white screen while loading StaticQuery on Gatsby website

I encountered an error that has been reported in this GitHub issue: https://github.com/gatsbyjs/gatsby/issues/25920. It seems like the Gatsby team is currently occupied and unable to provide a solution, so I'm reaching out here for help. Just to clar ...

Display the map using the fancybox feature

I have added fancybox to my view. When I try to open it, I want to display a map on it. Below is the div for fancybox: <div id="markers_map" style="display:none"> <div id="map_screen"> <div class="clear"></div> </div&g ...

Encountering an issue when attempting to construct the project: it asks for callback functions, but instead received an [

I'm currently facing an issue while trying to access a function that is crucial for updating some database values. Whenever I attempt to build the project, I encounter the following error: Error: Route.post() requires callback functions but got a [ ...

jQuery .click() function doesn't seem to be triggering as anticipated

My goal is to create an interactive functionality where: When a user clicks on the h4 element inside a .question divThe .question div expands to a height of 90px, and its child paragraph slides into view with a margin-top of 0If the user clicks the h4 el ...

Converting Excel files to JSON format by importing them and parsing the data

I recently added a "drag and drop file" feature to my website using material-ui-dropzone. I then integrated SheetJS js-xlsx for parsing xlsx data, but I'm struggling to make them work together seamlessly. While I believe the drag and drop part is func ...

Is it possible to stop JSON.stringify from invoking the toJSON method?

JSON.stringify provides a way for objects to customize their serialization process by defining a function named toJSON. Here is an excerpt from the MDN documentation: toJSON() behavior If an object being converted to a string has a method called toJSON, ...

Tips for rendering a mustache template on your local machine

I've been attempting to harness the power of mustache and jQuery to import a JSON file and create an HTML template. Despite following tutorials diligently, I'm facing a frustrating issue where nothing appears in the browser and there are no erro ...

Display subnavigation HTML when hovering over the navigation bar

I am in the process of creating a website that features a top navbar. When I hover over one of the nav-items, a sub-nav drops down. Currently, I have implemented a JavaScript/ajax function where clicking on a nav-item displays another HTML page in my subna ...

How can I load a specific div region using ajax for submitting a form?

I'm not sure if my approach is correct. On my main page, I have some information displayed. When you click a button, the form will load from a separate file: $('#viewport').load('/views/myView.php #targetDiv') This works fine ...

Displaying a group of elements in ReactJS

I'm currently working on assembling an array using different JSX components. There's a function I've created that populates this array with components and then returns it. let components = []; switch (obj.type) { case 'title': ...

Using React - sending 'this' as a property

Could there be any unseen side effects if I go ahead with this approach? class App extends React.Component { greet() { console.log("hello") } render() { return <Layout app={this}> } } Will I be able to call ...

Tips for creating a static background when displaying a modal popup in AngularJS

Incorporating a modal popup to modify a row within a grid view has been my recent task. Leveraging the row.getProperty() function, I successfully extracted the row values within the modal. However, an inconvenience emerged when attempting to edit a value ...

What are the steps for showcasing a personalized HTML tag on a web page

I need to capture user input text and display it correctly. This is what I have attempted: <div> <input type="text" ng-model="post.content" /> </div> <div> <div ng-bind-html="post.content| htmlize"></div> < ...

Updating the DOM using AngularJS is as easy as pie

My challenge involves having a list of items where the user can click on one, triggering a server request for that item's details. The retrieved values will then populate a div below based on the specific item selected. This is what my current code l ...

Navigating nested objects in JSON from an API: A guide to accessing hidden data

I am currently utilizing the cryptocomare API to retrieve data on various crypto coins within a Nextjs App. My approach involves redirecting users to the coin details page when they click on a specific symbol. I then attempt to extract this clicked symbol ...

What is the best way to rotate the model and randomize it by 90 degrees?

Using a cylinder to draw the tree (data shown in picture one and result in picture one) is straightforward, but incorporating a random rotation of 90 degrees into the tree model poses a challenge. https://i.sstatic.net/Xh9X6.jpg Initial input points // ...

Utilizing an ajax request to invoke a PHP function rather than using a traditional

Within my page, I have included a file named functions.js. In this file, there is a line that reads: ajaxRequest.open("GET", "save.php?json=" + jsonstring + "&rand=" + rand, true); How can I invoke a php method using ajaxRequest? Additionally, I woul ...

Eliminate the selection in a DropDownListFor when choosing a specific option in a separate dropdown

I'm currently facing a challenge with understanding JavaScript. As a newcomer to this language, I am striving to make it work in the following scenario: When the "Healthcare" option is selected from the "discipline" dropdown menu, the choice for "P ...

Creating a serial number in a Class without relying on a global variable is a useful technique that

I am looking for a way to assign a unique ID to each instance of a Class without relying on global variables. I have tried using a global variable and incrementing it, but I would prefer a more efficient approach. Is there a way to generate an ID within t ...

What is the method for calling a JavaScript function from one file to another within a Node.js environment?

Just starting out with JavaScript and exploring the idea of breaking the code into multiple modules. While working with nodejs, I've encountered an issue where it's complaining about pathChecker not being defined. Any insights on how to resolve t ...