Rendering cannot occur because the data has not been set

var DialogController = function ($scope, configFac, $q) {
    var placeholders = [];
    var varInit = function () {
        $q.all([configFac]).then(function (response) {
            $scope.configResources = response[0];
            placeholders[0] = response[0].one;
            placeholders[1] = response[0].two;
            placeholders[2] = response[0].three;
        });
    };

    var states = {
      'initial': {
        'key': 'initial',
        'inputPlaceholder': placeholders[0],
        'avatar': {
          'state': 'default'
        }
      },
      'editing': {
        'key': 'editing',
        'inputPlaceholder': placeholders[1],
        'avatar': {
          'state': 'listening'
        }
      },
      'answered': {
        'key': 'answered',
        'inputPlaceholder': placeholders[2],
        'avatar': {
          'state': 'thinking-complete'
        }
      }
     };
)};

When executing this code in my project, the input placeholders are not getting set because the promise is taking too long to return. Is there a way to make it wait for the response? Alternatively, I have introductory code running at the start of the project. Is there a method to trigger this function from a different module while that initial code is running?

Answer №1

Assign updated values to the states object within the promise then:

var DialogController = function ($scope, configFac, $q) {
    var placeholders = [];
    var initializeVariables = function () {
        $q.all([configFac]).then(function (response) {
            $scope.configResources = response[0];
            placeholders[0] = response[0].one;
            placeholders[1] = response[0].two;
            placeholders[2] = response[0].three;

            states.initial.inputPlaceholder = placeholders[0];
            states.editing.inputPlaceholder = placeholders[1];
            states.answered.inputPlaceholder = placeholders[2];
        });
    };

    var states = {
      'initial': {
        'key': 'initial',
        'avatar': {
          'state': 'default'
        }
      },
      'editing': {
        'key': 'editing',
        'avatar': {
          'state': 'listening'
        }
      },
      'answered': {
        'key': 'answered',
        'avatar': {
          'state': 'thinking-complete'
        }
      }
     };
)};

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

change the css back to its original state when a key is pressed

Is there a way to retrieve the original CSS of an element that changes on hover without rewriting it all? Below is my code: $(document).keydown(function(e) { if (e.keyCode == 27) { $(NBSmegamenu).css('display', 'none');} ...

The jQuery .each function is malfunctioning specifically on Google Chrome browsers

I developed a web application that utilizes jQuery to automatically submit all forms on the page. The code snippet is as follows: $('form').each(function() { $(this).submit(); }); While this functionality works perfectly in Internet Explore ...

Testing the Confirmation Popup in Ionic Framework Using Karma for Unit Testing

I am struggling to test both outcomes of a confirmation box using karma and jasmine. Despite receiving some assistance, I am finding it challenging to mock the ionicPopup. I would like to be able to test everything from the ng-click that triggers the box ...

JavaScript encounters an error when trying to create a MarkLogic instance with an array

[javascript] XDMP-CAST: (err:FORG0001) xs:string#1(.) -- Invalid cast: `json:object(<json:object xmlns:xs="http://www.w3.org/2001/XMLSchema" ` xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" .../>) cast as xs:string Stack Tr ...

Tips for connecting information to a controller in angularJS

Here is the json data from my playlist: { "id":18, "file":{"url":"/uploads/playlist/file/18/01_-_MashAllah.mp3"}, "event_id":23,"created_at":"2015-11-11T10:33:52.000Z", "updated_at":"2015-11-11T10:33:52.000Z", "name":"01 - MashAllah.mp ...

Specify a preset selection time in a TextField of time type in Material UI

I am looking to establish a default time for a textfield of type time in Material UI. My requirement is that before the user clicks on the picker, no time should be pre-set, but once they click, 08:00 should appear as the default time to choose from. View ...

Incorporating JSTree Into Your Website's Heading: A Step-By-Step

I'm in search of a way to integrate the following code snippet as a JSTree into the heading section of a webpage, depicted below: <div id="jstree"> <ul> <li>Core 1 <ul> & ...

What is the best way to compare a string with a specific object key in order to retrieve the corresponding value?

I'm looking to achieve a relatively simple task, or at least I think so. My goal is to compare the pathname of a page with key-value pairs in an object. For example: if("pathname" === "key"){return value;} That's all there is to it. But I&apos ...

Is it possible to implement a route within a controller in Express.js?

In my controller, I currently have the following code: module.exports.validateToken = (req, res, next) => { const token = req.cookies.jwt; //console.log(token); if (!token) { return res.sendStatus(403); } try { const ...

li rel=identifier

Can someone assist with choosing rel="28700" in order to update the text within the <li> tag? <li id="pen_li_8" rel="28700"><span class="linkselectValue">Text to be changed</span></li> I have attempted the obvious method: $ ...

Leveraging the push method within AngularJS

Hello, I am currently working on setting up an eCommerce shop using Angular. Below is the code snippet I am using: var shopApp = angular.module('shopApp', ["slugifier"], function() {}); controllers.productController = function($scope,FetchFa ...

Why are the variables not reflecting the changes when an event is triggered?

I'm a beginner in programming and would really appreciate some guidance. Why are my variables not updating when I click the button?? Here is the HTML code snippet: <h1>NIM</h1> <p>Welcome to a simple edition of the game NIM</p& ...

How to retrieve a value from an Angular form control in an HTML file

I have a button that toggles between map view and list view <ion-content> <ion-segment #viewController (ionChange)="changeViewState($event)"> <ion-segment-button value="map"> <ion-label>Map</ion-label> & ...

What is the best way to incorporate spacing between rows in material UI and React?

How do I add spacing between each row in my table using MUI? I've tried using borderSpacing: '0px 10px!important' and borderCollapse: 'separate!important' but it's not working. Any suggestions on how to achieve this with MUI w ...

What will be the quickest and most reliable trigger - matchMedia, window.resize, orientationchange, or perhaps both combined?

I am trying to trigger a function when a user rotates their device and I'm seeking advice on which event would be most effective for this purpose. In your experience, which event do you recommend that will call the function quickly and consistently? I ...

Minimize all the open child windows from the main Parent window

I would like to implement a functionality where, upon logging in, the user is directed to a Main Page that opens in a new window. This Main Page contains two buttons, each of which will open a specific report associated with it in a new window when clicked ...

Implementing position sticky on a div depending on its content text - step by step guide

If the text inside the .newsDate matches the previous or next .newsDate, I want to make its position sticky when scrolling, until it reaches the next .newsMiddleCont div. What I'm trying to achieve: The same date on multiple news items should s ...

Tips for adding data to an array while iterating through an object:

I have a task of looping through object results fetched from an API and pushing them into an array. historys: any = []; Here is how I am attempting to loop through the objects: Object.keys(response['orderdetail']).forEach(function(index, key) ...

Is it possible to create a development build using Npm with React and Typescript?

I have successfully set up a TypeScript React app by using the command below: npx create-react-app my-app --template typescript However, running "npm start" generates development javascript files and launches a development server which is not id ...

Implementing Passport authentication for Steam, transitioning from Express to NestJS

I have embarked on the task of transitioning an express project to nestjs. How can I achieve the same functionality in Nestjs as shown in the working code snippet from Express below? (The code simply redirects to the Steam sign-in page) /* eslint-disable s ...