Performing an AJAX POST request using AngularJS

Question

Performing an AJAX POST request using AngularJS

As I dive into AngularJS, one challenge I've encountered is integrating an AJAX call into my controller.js file. I've already managed to get the login controller up and running with the same service as this one.

Now, my goal is to fetch data from the server using a different method in my service and then pass it to the HTML in a specific format. However, I'm unsure about the correct approach to achieve this. The code snippet below represents my initial attempt, drawing inspiration from a previous Chrome Packaged App project where manipulating display on HTML was simpler due to a single JavaScript file. This time around, I'm navigating through controllers, services, and the app structure.

.controller('VFCtrl', function($scope, $stateParams, $http, $ionicLoading, $state, $sce) {
        $ionicLoading.show({
            template: 'Loading...',
            duration: 1000
        });

        $http.post('myService/mysite.aspx',{action: 'someMethodFromService', ParameterFromMethod: 'someValue'})
              .success(function (response) 
              {
                  var htmldata='';
                  for(i=0;i<response.length;i++)
                  {
                      var htmlInfo = '<li><div class=\'col\'><a href="'+ response[i].Id +'"><img width=\'100%\' height=\'auto\' src="'+response[i].Image + '" class=\'profile-img\' /><h3>' +response[i].Name+'</h3><p>'+response[i].Title+'</p></a></div></li>';

                      htmldata+= htmlInfo;
                  }
                    $("#vflist").html(htmldata);
              })
       //I don't wanna change how to submit data in my html in the success part
       //But if it MUST be change then I will.
              .error(function(data, status, headers){
                 console.log(status);
              });

    })

javascript angularjs ajax

Answer 1

Answer №1

If you want to display a list of items from an array using AngularJS, you can utilize the ng-repeat directive. This directive allows you to loop through each item in the array and display them on the webpage. While the code snippet provided may not match your specific situation, it offers a basic example of how ng-repeat works: http://example.com/ng-repeat-demo.

The element where you include the ng-repeat directive will serve as the template for each repeated item. Any elements nested within this parent element will be duplicated for each item in the array. Check out the code pen link above for a live demonstration.

<ul>
    <li ng-repeat="item in vm.items"><span style="color:blue">{{ item.title }}</span></li>
<ul>

Answer 2

If you want to display a list of items from an array using AngularJS, you can utilize the ng-repeat directive. This directive allows you to loop through each item in the array and display them on the webpage. While the code snippet provided may not match your specific situation, it offers a basic example of how ng-repeat works: http://example.com/ng-repeat-demo.

The element where you include the ng-repeat directive will serve as the template for each repeated item. Any elements nested within this parent element will be duplicated for each item in the array. Check out the code pen link above for a live demonstration.

<ul>
    <li ng-repeat="item in vm.items"><span style="color:blue">{{ item.title }}</span></li>
<ul>

Answer 3

Answer №2

Using Angular instead of jQuery would be more suitable in this scenario. It is not recommended to manipulate the DOM in an Angular controller.

To improve your code, you can follow the example below (please note that the JSON structure may vary from your original request):

var app = angular.module("sa", [])
app.controller('VFCtrl', function($scope, $http) {

  $http.get('http://jsonplaceholder.typicode.com/posts', {
      action: 'someMethodFromService',
      ParameterFromMethod: 'someValue'
    })
    .success(function(data) {
      $scope.posts = data;
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="VFCtrl">
  <ul id="vflist">
    <li ng-repeat="post in posts">
      <a href="{{post.id}}">{{post.title}}</a>
  </ul>
</div>

Answer 4

Using Angular instead of jQuery would be more suitable in this scenario. It is not recommended to manipulate the DOM in an Angular controller.

To improve your code, you can follow the example below (please note that the JSON structure may vary from your original request):

var app = angular.module("sa", [])
app.controller('VFCtrl', function($scope, $http) {

  $http.get('http://jsonplaceholder.typicode.com/posts', {
      action: 'someMethodFromService',
      ParameterFromMethod: 'someValue'
    })
    .success(function(data) {
      $scope.posts = data;
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="VFCtrl">
  <ul id="vflist">
    <li ng-repeat="post in posts">
      <a href="{{post.id}}">{{post.title}}</a>
  </ul>
</div>

Performing an AJAX POST request using AngularJS

Answer №1

Answer №2

Similar questions

All the references were added, but Angular Material still refuses to cooperate

How can I replace minified JavaScript files with non-minified versions in AngularJS for local development purposes?

The 'change' event in AJAX does not trigger when the value 'select value is assigned from PHP

Tips on invoking a simple javascript function within a jasmine testing specification

Tips for incorporating Jquery forms with PHP in multiple iterations of a while loop

Watching for when the state changes in the AngularJS framework using the `$scope.$on('$stateChangeStart')` and

Passing Data from Child Components to Parent Components in Vue.js

Even when the alert is dismissed, the `UnexpectedAlertOpenError` in Selenium Webdriver on Node.js continues to persist, causing unexpected

Displaying or concealing HTML elements using AngularJS while a modal is open

Transforming the date from yyyy-mm-dd to Tuesday, the 25th

Enhancing SVG graphics dynamically with JavaScript and ensuring compatibility across different web browsers

Setting the state of a component prior to rendering the next component using React-Redux

When using $http.get, it retrieves source code instead of displaying HTML content

Selenium waits patiently for my mouse to be in motion before proceeding

Type Error in Node.js Form Submission: Unable to define 'userId' property due to undefined value

Using Knockout to bind an element to the selected value from a dropdown list

Is there a way to lower the cost with the same value that was used to raise it?

unresolved string constant issue with a django template command

troubles encountered in implementing JavaScript to toggle the display of content upon clicking a link

Struggling with implementing map() inside another map() within the render() method in React TypeScript