The $scope object in Angular is supposed to display the $scope.data, but for some reason, when I attempt to access it

Having an issue with my controller that fetches data from a service.

After receiving the data in the controller, I'm using $scope to pass it to the view.

Strange behavior - console.logs inside the 'then' function display the data correctly. However, outside of it, when I try to access $scope.data, it shows up as an empty object.

Could there be an error in my code?

(function() {

  angular
    .module("eplApp")
    .controller("tableCtrl", TableController);

  TableController.$inject = ['httpService', "$scope"];

  function TableController(service, $scope) {
    var apiTableUrl = "http://api.football-data.org/v1/soccerseasons/426/leagueTable";
    $scope.data = {};

    service.getListFromUrl(apiTableUrl).then(function(data) {
      $scope.data = data;
      console.log($scope);
      console.log($scope.data);
    });
    console.log($scope);
    console.log($scope.data);
  }
})();

Answer №1

Angular operates asynchronously, which is why attempting to log it outside of a service response will not work

To properly display the data, follow this example:

function DisplayController(service, $scope) {
  $scope.info = {};

  service.getDataFromEndpoint(apiInfo).then(function(responseData) {
    $scope.info = responseData;
    showData();
  });

  function showData() {
    console.log($scope.info);
  }
}

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

One limitation is that you cannot use JQuery to make multiple rows editable simultaneously

I have a unique challenge with implementing an edit button on each row of a dynamic Bootstrap table. I am attempting to toggle the button's icons and, depending on its current state, enable the corresponding row for editing. <td><button typ ...

I was surprised by how Await behaved in if-else statements, it was not what

let metadata = []; allNFTs.map(async (e) => { if (e.metadata) { metadata.push(JSON.parse(e.metadata).attributes); } else { let config = { method: "get", url: `http://localhost:3000/api/fetch ...

JavaScript: Trouble with statement execution

My code is designed to classify a point as 1 if it's above the line y=x, and -1 if it's below the line y=x. I visually represent this line in a canvas by plotting y=x (although due to invertion on the y-axis, it appears like y=-x). For each point ...

Enhancing infinite scroll functionality with ajax integration

After implementing a method to enable infinite scroll on my website using the following function: window.onscroll = yHandler; function yHandler(){ var wrap = document.getElementById('wrap'); var contentHeight = wrap.offsetHeight; var yOffset = w ...

Is there a way to display my current connected clients to a new client using socket.io?

I am currently working on a project involving socket.io. Upon connecting to a new socket, my input username is displayed in the "usersDiv" where all clients are supposed to be listed. However, I've noticed that when I open another tab and input my nam ...

Tips for sharing a global variable across numerous functions in various files

<script> var words = new Array(); words[1] = 'fresh'; words[2] = 'ancient'; </script> <script src="scripts/validation.js" type="text/javascript"></script> Additionally, in the validation.js file, we find: fu ...

How can I deselect the 'select-all' checkbox when any of the child checkboxes are unchecked?

Here is the code provided where clicking on the select-all checkbox will check or uncheck all child checkboxes. If any child checkbox is deselected, the 'select-all' checkbox should also be unchecked. How can this be achieved? $(document).read ...

Using Javascript to dynamically swap images within a div as the user scrolls

Can someone help me achieve a similar image scrolling effect like the one on the left side of this website: I am looking to change the image inside a div as I scroll and ensure that the page doesn't scroll further until all the images have been scrol ...

Stop the duplication of the HTML content to ensure only one copy is saved

Recently, I have been coding a feature that saves the HTML of the currently displayed page to another file upon pressing a button. However, I encountered an issue where if the button is pressed multiple times quickly, the saved file contains incorrect HTML ...

Angular 1.6 limits the ability to include multiple custom components on a single page

I'm currently working with angular 1.6 and have encountered an issue with two components, config-list and request-dates. Both components function correctly individually on a page, but when I attempt to add both components to the same page, only the s ...

Error: Attempting to access the 'toString' property of an undefined object is not permitted (apex-charts)

While working on a personal project, I considered using apexcharts. However, an error shown in the image kept popping up. It seemed to disappear when I set the width and height properties in the Chart component or when the site was in production. Currently ...

Unexpected symbols appearing in image tag after AJAX response

I'm currently grappling with an issue related to an AJAX request I am working on (I am quite new to the world of AJAX). I have set up an API and my goal is to fetch a PNG image using an Authorization header that requires a token supplied by me (which ...

Use the useEffect hook to pass newly updated data to a FlatList component

I have encountered an issue with updating a FlatList component in my React Native application. The scenario involves running a graphql query to render items and then refetching the data when a mutation is executed using Apollo's refetch option. Althou ...

Tips for preventing duplicate entries in an AG Grid component within an Angular application

In an attempt to showcase the child as only 3 columns based on assetCode, I want to display PRN, PRN1, and PRN2. Below is the code for the list component: list.component.ts this.rowData.push( { 'code': 'Machine 1', &apo ...

Tips for guaranteeing blocking within a loop in Node.JS

While I usually enjoy the asynchronous nature of Node.JS and its callback-soup, I recently encountered an issue with SQLite that required a certain part of my code to be run in a blocking manner. Despite knowing that addressing the SQLite problem would mak ...

Retrieving custom data attributes from slides within a slick carousel

After the recent Slick carousel update to version 1.4, there have been changes in how data attributes are accessed from the current slide. The previous method that was working fine is as follows: onAfterChange: function(slide, index) { $('.projec ...

PHP Ajax login form to instantly authenticate without redirecting to a new page

After attempting to implement Ajax in my login form by following two different tutorials, I am still facing the issue of error messages redirecting to another page instead of displaying on the same page. I have tried to troubleshoot and compare my code wit ...

How can I determine if a URL in react js includes a specific string?

I am working on a project where I need to check if a given URL contains the string youtube using react hooks in React JS. This is what my current code looks like: useEffect(() => { let srcLink = "www.google.com/https://img.youtube.com/vi/h9-qcy3HQn ...

Oops! The useNavigate() function can only be utilized within the confines of a <Router> component

I encountered an error while working on my project: An uncaught Error occurred: useNavigate() may only be used within a context of a <Router> component. at invariant (bundle.js:36570:20) at useNavigate (bundle.js:36914:35) at App (bundle. ...

Tips for repairing a side bar and header with CSS when using a JS & jQuery scroller

I am working on a layout design and my goal is to have the left sidebar, right sidebar, and header remain fixed in place. Here is the CSS code I am using : #container { padding-left: 200px; /* Left Sidebar fullwidth */ padding-ri ...