Showing the ng-controller contents post executing AJAX request using the "as" method

My goal is to display the contents of ng-repeat after making an AJAX call using $http.

    <table ng-controller="TableController as tc">
        <tr>
            <th>Date</th>
            <!-- other headers are here -->
        </tr>
        <tr ng-repeat="order in tc.orders" >
            <td ng-bind="order.id"></td> //It doesn't appear
            <td>@{{ order.id }}</td>     //It doesn't appear as well. I use Laravel, so I need to put @
        </tr>
    </table>

Below is the relevant script section:

angular.module('adminAngular', ['ui.bootstrap','dialogs.main'])
.controller('TableController', function(dialogs, $http){

    var instance = this;
    this.orders = [];
    $http({
        method : "POST",
        url : "/admin/getOrders"
    }).then(function (response) {
        this.orders = response.data;
        console.log("Inside; "+this.orders.length);
        });
});

Despite seeing the data assigned to 'this.orders' in my console log, it does not display when using ng-repeat="order in tc.orders".

I sought assistance from this question, but it did not resolve the issue. I suspect that the problem may be related to the 'as' statement used in this situation.

Since there's limited information available about the 'as' syntax online, any advice would be greatly appreciated.

Answer №1

It is important to utilize your instance within the resolved function of a promise in order to properly assign it to the correct instance (controller instance):

angular.module('adminAngular', ['ui.bootstrap','dialogs.main'])
.controller('TableController', function(dialogs, $http){
var instance = this;
instance.orders = [];
$http({
    method : "POST",
    url : "/admin/getOrders"
}).then(function (response) {
    instance.orders = response.data;
    console.log("Inside; "+ instance.orders.length);
        });
});

This instance is commonly named as: vm, which stands for View Model.

For instance:

angular.module('adminAngular', ['ui.bootstrap','dialogs.main'])
.controller('TableController', function(dialogs, $http){
var vm= this;
vm.orders = [];
$http({
    method : "POST",
    url : "/admin/getOrders"
}).then(function (response) {
    vm.orders = response.data;
    console.log("Inside; "+vm.orders.length);
    });
});

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

"If the radio button is selected, ensure that the element has the required attribute added

In my form, I have radio buttons and an input field. When any of the three top radio buttons are checked, I need to make the input field required. Here is my code: <ng-form name="addShareholderForm"> <form name="form.addForm" class="form-validati ...

Customizing the Steps Component in Ant Design

Currently, I am utilizing the Steps component from Ant Design. My goal is to enhance its functionality by adding additional components, like a button placed next to each step's description to make it more interactive. Furthermore, I am looking to inc ...

Unable to load data from server using AJAX in jQuery datatables

Hello there, I am seeking assistance regarding DataTables. I have been using it for a while now through both dom manipulation and JSON code. However, I am facing issues with two large result sets that are running too slow. In an attempt to resolve this, I ...

Adding functions to the prototype of a function in JavaScript

Is there a more concise way to simplify this code snippet? var controller = function(){ /*--- constructor ---*/ }; controller.prototype.function1 = function(){ //Prototype method1 } controller.prototype.function2 = function(){ //Prototyp ...

Establish a new <section> to serve as a distinct webpage

I have a question about creating multiple <section> elements on a page. I am looking to build an HTML document with several <section> tags, as outlined below. <html> <head> </head> <body> <sectio ...

Adding the expanded search icon to a text box in Vuetify: A step-by-step guide

Recently, I integrated Vuetifyjs into my right-to-left (RTL) Vue 2 project. Within a card element, I inserted a table and included a search bar following the documentation. Now, I have two specific goals in mind: Relocate the "number of items to show" opt ...

Transferring an Excel file through an HTML form input to a Java REST method

How can I submit an excel file from an HTML form input field and send it to a RESTful Java method for processing? I am integrating AngularJS into my project as well. ...

What is the best way to combine data from two rows into one row?

Can someone help me with merging 2 sets of Line data into a single row for each entry? For example, the 'Green Bay Packers @ Chicago Bears' row should display '+3.5000 and -3.5000', while 'Atlanta @ Minnesota' should show &apo ...

add a hyperlink within a mouse click action

Looking for a way to make phone numbers clickable on mobile devices? Check out this script! I've implemented a script that displays a phone number when users click 'call us' and sends a Google Analytics event. However, I'm having troub ...

Struggling with Vue's Router Transition fade in/out effect not functioning as expected?

Question: I've implemented Vue's Router and it switches between components without any issues. However, I added a <transition name="fade" mode="out=in"> around it but the fade effect is not working as expected. Desired ...

Implementing knockoutjs re-bind when the document is reloaded via AJAX requests

I am currently using a mobile UI Framework that loads pages via ajax. When changing a page, it removes the DOM of the previous page using $.remove(); In addition to that, I rely on knockoutjs to bind data on every page. The issue arises when page A is re ...

My Node.Js app refuses to run using my computer's IP address, yet works perfectly with localhost

My Node.js application is set up to listen on port 5050 of my machine: Visiting http://localhost:5050/myapp loads the app successfully. I am using the Express framework, so my listening framework looks like this: var server = app.listen(5050, '0.0.0 ...

Encountering null values in an ASP.NET MVC Controller when handling checkboxes with jQuery AJAX requests

I'm having trouble posting data to the server. After selecting checkboxes in a form and retrieving values from them, I attempted using this code: $(".DownloadSelected").click(function () { var values = []; var chks = $(':checkbo ...

Creating Typescript packages that allow users to import the dist folder by using the package name

I am currently working on a TypeScript package that includes declarations to be imported and utilized by users. However, I have encountered an issue where upon publishing the package, it cannot be imported using the standard @scope/package-name format. I ...

Error: The specified function in the schema is not valid for the current operation mode

I'm facing an issue with validating a material ui form using Formik and Yup. The error keeps popping up. This is the schema I imported from another file: export const validationSchema = Yup.object({ email: Yup.string() .email('Invalid Ema ...

Equality and inequality in arrays

Could someone help clarify why these comparisons between different JavaScript arrays result in true? ["hello"] !== ["world"] [42] !== [42] ["apple"] != ["orange"] [7] != [7] ...

Showcasing top performers via JavaScript tabs

I have two tabs on my webpage: "Overall Leaderboard" and "Weekly Leaderboard". Each tab displays a leaderboard with different scores. When I click on the "Overall Leaderboard" tab, it shows a leaderboard with specific scores. Now, my question is how can ...

Sending a Php request using AJAX and receiving JSON values

Trying to retrieve values from PHP using AJAX Post. I've researched and found that JSON dataType should be used, but encountering an error: "SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 72 of the JSON d ...

The form is failing to redirect to another page

retrieveStudents.js $("#submit").click(function(){ $.ajax({ url: "fetchStudents.php?branchCode=1", datatype:"JSON", success: function(obj){ $("table").append("<form method='POST' action='recordAttendance.php'> ...

Dealing with models in Vue.js is proving to be quite a challenge

Why isn't myGame showing as 超級馬力歐 initially and changing when the button is pressed? It just displays {{myGame}} instead. I'm not sure how to fix it, thank you! let myApp = new vue({ el:'myApp', data:{ myGame:&a ...