Trouble encountered while trying to utilize a Promise to define a global variable

I am attempting to populate a global variable using a function and then call subsequent functions after the data is retrieved. Below is the current code I have:

$(function () {
    var jsonData = {};

    var dataRetrievalPromise = function () {
        return new Promise(function (resolve, reject) {
             jsonData = { "data": [{ "test": "value1" }, { "test2": "value2" }, { "test3": "value3" }] }
             return resolve(jsonData);
        });       
     }

    dataRetrievalPromise().then(function (result) {
         generateTabs();
    });
});

function generateTabs() {
    var test = jsonData;
};

Although dataRetrievalPromise successfully sets the value of jsonData, I encounter an issue when trying to access it within generateTabs(), as it appears undefined.

Edit: I neglected to include the resolve statement. Edit 2: Post punctuation has been corrected, however, the problem persists in my code.

Following Adiga's suggestion, I replaced dataRetrievalPromise with the below code, but unfortunately, the behavior remains the same.

var dataRetrievalpromise = function () {
    return new Promise(function (resolve, reject) {
        return resolve(jsonData = { "data": [{ "test": "value1" }, { "test2": "value2" }, { "test3": "value3" }] });
    });
};

Answer №1

I'm looking for a way to populate a global variable using a function

Avoid doing that. Although your code is functioning, the issue lies in declaring jsonData within the scope of $(function () {…}) rather than as a global variable. It's recommended not to utilize a global variable here as it may be filled at an uncertain time (when the promise resolves). Instead, pass the result of the promise as an argument to the subsequent function call:

function retrieveData() {
    return new Promise(function(resolve, reject) {
        resolve({ "data": [{ "test": "value1" }, { "test2": "value2" }, { "test3": "value3" }] });
    });       
}

retrieveData().then(function (result) {
     generateTabs(result);
//                ^^^^^^
});

function generateTabs(jsonData) {
    var test = jsonData;
}

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

Having trouble with ui-router: "$injector:modulerr" - it seems an error has occurred

I recently started the tutorial AngularJS Tutorial: Learn to Build Modern Web Apps with Angular and Rails by Thinkster, but encountered a problem. After creating an inline template, I ended up with a blank page and an error message $injector:modulerr with ...

What is the best way to manage numerous asynchronous post requests in AngularJS?

$scope.savekbentry = function (value) { console.log('save clicked'); console.log(value); console.log($scope.kbentry.kbname); $scope.kbentry.mode = value; var kbname = $scope.kbentry.kbname; var kbd ...

Determining the length and angle of a shadow using X and Y coordinates

I'm currently tackling the task of extracting data from a file generated by a software program that has the ability to add a shadow effect to text. The user interface allows you to specify an angle, length, and radius for this shadow. https://i.stack ...

Change the text of a button by using an input field

How can I dynamically update button text based on input field value? <input class="paymentinput w-input" type="tel" placeholder="0" id="amount-field"> <button id="rzp-button1" class="paynowbutton w-button">Pay Now</button> I want the bu ...

Issue encountered while subscribing to SalesForce topic using Node.js

Attempting to subscribe to a SalesForce topic through a Node.js server using the code provided in the JSForce documentation: conn.streaming.topic("InvoiceStatementUpdates").subscribe(function(message) { console.log('Event Type : ' + message.ev ...

Checking if a phone number begins with a zero using a regular expression

Is there a way to ensure that numbers entered into a field always start with a 0? Initially, I thought the company wanted to mandate entering 0 first, but I believe there might be a more elegant solution. function validateNumber(dataValues, setErrors) ...

Unable to complete the task of executing com.github.eirslett:frontend-maven-plugin:1.6:install-node-and-npm (install node and npm)

I'm encountering an issue with Maven that's been causing some trouble: [ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.6:install-node-and-npm (install node and npm) on project xxx-frontend: Could not download Node.js: ...

What could be causing the removeChild() method to fail when trying to delete a list item in JavaScript DOM manipulation?

Check out this interactive shopping list. You can add items, delete them, and mark them as completed. Adding and deleting items works fine, but there's an issue when toggling them. Issue (occurs when toggling multiple list items) If you add 3 items ...

Retrieve a specific child element by clicking on a custom control on the map

I have a container element with three child spans. Using JQuery, I can determine which child was clicked when the container is clicked by utilizing the following function: $('.unitContainer').on('click','span',function(){ ...

Setting up Karma configuration to specifically exclude nested directories

When unit testing my Angular 2 application using Karma, I encountered an issue with my directory structure: └── src/ ├── index.js ├── index.js.text ├── index.test.js ├── README.txt ├── startuptest.js ...

The Challenge of Scope in JavaScript

I'm currently facing an issue with executing ajax requests using jQuery. The sequential order in which I am attempting this is as follows: Click the button Make an ajax post request Invoke a function that resides outside the current scope upon compl ...

The attempt to access 'reading params' is resulting in an error due to undefined properties

Looking for some assistance in resolving an error I'm encountering. Below is a snippet of my code: const ProductScreen = ({match, history}) => { const [qty, setQty] = useState(1); const dispatch = useDispatch(); const productDetail ...

Error injecting angular.bootstrap in Angular 1.6.5 version

I have a MeanJS.org skeleton app that I've transformed into hapi-js from express, switched to postgres from mongo, and incorporated OAUTH for authentication (mainly because I liked the server/client module folder structure - haha). Everything seems t ...

Is it necessary to validate, sanitize, or escape data before utilizing the build method in sequelize.js?

I currently have a node/express/sequelize application where I am utilizing the build method in sequelize to generate instances of my foo model. Foo Controller exports.create = function(req, res) { var foo = db.Foo.build(req.body); foo.save().t ...

Retrieve the source code of the current page using JavaScript and the Document Object Model (DOM)

Is there a way to retrieve the source of the current page using JavaScript and DOM? Do I need to utilize AJAX for this task? ...

It's incredibly frustrating when the Facebook like button is nowhere to be found

Currently, I am in the process of developing a website for a local bakery and have decided to incorporate a Facebook like button on the homepage. After visiting developers.facebook, I proceeded to copy and paste the code provided. It appears that there use ...

Integrate functionality to track elapsed hours in stopwatch timer

Struggling to incorporate hours into my JS Stopwatch timer, the math for calculating the hours section is proving difficult. This is what I have so far, but I suspect the issue lies within the h variable. function formatTime(time) { var h = m = s = ...

jQuery and CSS3 for importing and customizing text files

I successfully customized the file input utilizing jQuery and CSS3. However, there is one aspect I couldn't quite figure out. After the user selects an image or file, I want to display the selected file's text at the very bottom of the text like ...

What is the method for moving one div above or below another div using the scroll bar?

Here's the scenario I'm facing: I have rows with buttons that, when clicked, reveal a set of options. The challenge is that depending on where the row is located on the page, the settings need to open either above or below the button. When the b ...

Problem with custom anchor component in React that needs to perform an action before being clicked

React Component (Custom Anchor) import React from 'react'; class Anchor extends React.Component { onClick = (event) => { // ----------------------------- // send Google Analytics request ...