The page unexpectedly stalls without any explanation

Lately, I've been exploring the capabilities of MyJSON. I attempted to create a function to retrieve data from my database in order to avoid manually typing lengthy text each time I needed it. However, whenever I ran the code, my page would freeze without even executing it. Could this be a bug related to my IDE? For context, I am using repl.it with HTML/CSS/JS.

function submit() {

}
console.log("test test test");
function getJSON() {
    console.log("beginning");
    var out;
    console.log("start");
    $.get("https://api.myjson.com/bins/1fsm75", function(data, textStatus, jqXHR) {
        var json = JSON.stringify(data);
        console.log(json);
        out = json;
        console.log(out);
    });
    while(out == undefined) {}
    return out;
}
console.log("testarooni");
console.log(getJSON());

Answer №1

To effectively troubleshoot the problem you're encountering, I recommend checking the network tab in your browser (if using Google Chrome, simply press F12), specifically focusing on the GET call performance.

Additionally, I suggest conducting the same call asynchronously. Using an async GET call is advantageous because it's non-blocking.

Below is a sample of how you can perform an async GET call to fetch data from the provided Endpoint:

<!DOCTYPE html>
<html>
    <head>
        <script>

            async function fetchDataAsync() {
                let response = await fetch('https://api.myjson.com/bins/1fsm75');
                let data = await response.json()
                return data;
            }

            fetchDataAsync()
                .then(data => console.log(data)); 

        </script>        
    </head>
    <body>
    </body>
</html>

Answer №2

The temperature is dropping due to this particular line of code while(out == undefined) {}

It appears that you are attempting to achieve the functionality of "Waiting for the $.get method to complete, triggering its callback, and setting the value of out before proceeding."

However, JavaScript operates on a single thread. This means that while it's stuck in the loop of while(out == undefined) {}, it is constantly looping without giving the opportunity to execute the response from $.get.

To resolve this issue, you should handle the Promise/Observable (I can't recall which one) that $.get returns.

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

The fuse-sidebar elements are not being properly highlighted by Introjs

I have recently developed an angular project that utilizes the fuse-sidebar component. Additionally, I am incorporating introjs into the project. While introjs is functioning properly, it does not highlight elements contained within the fuse-sidebar. The ...

Learn the process of converting C# code to Kotlin with the incorporation of a Json library

Hello, I am new to Kotlin and apologize for my poor English. I am trying to convert the code snippet below to Kotlin. However, I am having trouble finding the equivalent of [JsonExtensiondata] in Kotlin. public class ProofAttribute { [JsonProperty(&q ...

The customized Vaadin component with a tag is missing from the MainView layout

I am attempting to integrate my custom vis component into the MainView VerticalLayout. However, it is appearing above the layout and the layout itself contains an empty component tag. Custom component code In this section, I have labeled my component as " ...

How to transform a JSON array into individual object properties using jQuery?

In my JSON data, the structure looks like this: [ { "name": "object1", "prop": "prop1", "props": [ { "prop1": "value1" }, { "prop2": &quo ...

The functionality of react-waypoint's onEnter/onLeave event handlers seems to be malfunctioning

Recently, I experimented with react-waypoint to control the visibility of a div. The code works as intended by hiding the div when it reaches the waypoint inside onEnter. When the div is inside, the isInView state becomes true, which in turn triggers the d ...

The import statement is causing a malfunction in the application

Currently, I am facing an issue while trying to import a mongoose model from one file that contains the schema (issue.js) into another file (server.js). Everything runs smoothly when running the app with nodemon until I attempt to import the Issue model fr ...

Identical HTML elements appearing across multiple DOM pages

My question might seem silly, but I'm facing an issue. I have several HTML pages such as index.html and rooms.html, along with a main.js file containing scripts for all of these pages. The problem arises because I have variables like const HTMLelemen ...

Reorder the placement of file inputs that have been prepended

Would it be feasible to have the prepended file input display below the preceding element rather than above it? This way, the "Select a file:" text would remain at the top of all newly added elements. $(document).ready(function(){ $(' ...

What are the steps for accessing a JSON file in PhoneGap?

Currently, I am working with Phonegap and need help on how to read a JSON file. Can someone provide guidance on this? function readAsText(file) { var reader = new FileReader(); alert("Inside readAstext"); var jsonArray; reader.onloadend = function ...

When hovering over text in HTML, the image remains unchanged in CSS

Trying to modify the displayed image based on the user's click on different text, my code is structured as follows: $("#zubi a").hover(function() { $("#pic").removeClass().addClass($(this).attr('rel')); }); #pic.p1 { content: url("htt ...

Wait for the canvas to fully load before locating the base64 data in HTML5

Wait until the full canvas is loaded before finding the base64 of that canvas, rather than relying on a fixed time interval. function make_base(bg_img, width, height) { return new Promise(function(resolve, reject) { base_image = new Image(); base_imag ...

Utilizing a JavaScript function to toggle the Bootstrap dropdown without the need for manual clicking

I've configured a Bootstrap dropdown in my site's mini cart that includes a lightbox effect to grey out the background content when the dropdown is activated. Here's the code snippet: $(".dropdown").on('show.bs.dropdown hide.bs.dropdow ...

The array in this.props (passed down by redux) comes back as undefined

To fetch data using Redux in my component, I follow this approach: import React, {Component} from 'react'; import {bindActionCreators} from 'redux'; import {connect} from 'react-redux'; import * as actionCreators from '. ...

Learn how to create a "generated" texture coordinate in three.js similar to how it is done in Blender Cycles

How can I properly display a texture on a cylinder object using THREE.js without distortion? Currently, the texture appears stretched along the edges of the cylinder as shown here: https://i.sstatic.net/O2YFr.png This issue is based on the texture provide ...

Iterating through an array and storing elements in a collection using Meteor

I am working on a dynamic form that allows users to add input fields. Here is the code snippet: Template.decisionSetUp.events({ 'click #addInput':function() { event.preventDefault(); $('.categoryContainer').append('<in ...

Vuejs - Display multiple dates within one component

I have developed various components (such as tables, selects, etc) that all rely on the same methods to access API information. The main objective is to be able to use these components across different pages of the application in a way that allows for fle ...

Does Notepad++ only paste the first line of copied code when using the replace feature?

I frequently utilize the replace feature in Notepad++ to change code across multiple files. However, I've encountered an issue where when I try to paste code with multiple lines into the replace textbox of Notepad++, only the first line gets pasted. T ...

Make sure to blur an editable p element using only vanilla JavaScript

Check out this code snippet: <p contenteditable>The most amazing p tag in the world of p tags</p> Here is the corresponding Javascript: var p = document.querySelector('p'); p.addEventListner('keypress', function (e) { ...

Having trouble getting my node.js and socket.io code to function properly

This is my code for basic broadcasting functionality on the server side: Server Side var socket = require( 'socket.io' ); var express = require( 'express' ); var http = require( 'http' ); var app = express(); var server = h ...

Display when moving up and conceal when moving down

Is there a way to make the div appear when scrolling up and down on the page? I'm new to jquery and could use some assistance, please. ...