Angular JS Display Response Values

Question

I'm trying to display data from one page to another in Angular JS. Using displayResponse in Firefoxes Console, the Response data seems to be retrieved however I'm having trouble trying to display the values on the page which is troublesome since a Team member was able to get them to display properly on other pages on the site.

Here is the Code so far (I have removed chucks of the script to save screen space. These bits of code are not relevant to the issue afaik):

var app = angular.module("myApp", ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider
    .when('/ViewSalesRecords', {
      templateUrl: 'view-sales-records.html',
      controller: 'salesRecordController'
    }).
  when('/ViewSingleSale', {
    templateUrl: 'view-single-sale.html',
    controller: 'salesRecordController'
  });
});

app.controller('salesRecordController', ['$scope', '$http', function($scope, $http) {

  $scope.displaySingleSale = function(sale_id) {

    $http.post('read_sale.php', {
        'sale_id': sale_id
      })
      .then(function(response) {
        $scope.singleSalesRecord = response.data;
        console.log($scope.singleSalesRecord);
      })
  }
  $http.get("read_sale.php")
    .then(
      function(response) {
        $scope.salesRecords = response.data;
      }
    )
}]);

<head>
  <link href="./styles/style.css" rel="stylesheet">
</head>
<table class="table table-hover" data-ng-model="sale_id">
  <p><strong>Sale ID: {{displayResponse}} </strong> </p>
  <p><strong>Sale Date: </strong> </p>
  <thead>
    <tr>
      <th>Product ID</th>
      <th>Product Name</th>
      <th>Quantity</th>
      <th>Item Total</th>
    </tr>
  </thead>
  <tbody>
    <tr data-ng-repeat="s in singleSalesRecord">
      <td>{{s.product_id}}</td>
      <td>{{s.product_name}}</td>
      <td>{{s.quantity}}</td>
      <td>${{s.product_price}}</td>
    </tr>
  </tbody>
</table>
<p><strong>Total: ${{s.orderTotal}}</strong></p>

The page that is sending the data

<head>
  <link href="./styles/style.css" rel="stylesheet">
</head>
<div>
  <input class="form-control searchBar" data-ng-model="searchText.sale_id" type="text" placeholder="Search sales by Sale ID">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Sale ID</th>
        <th>Total items</th>
        <th>Total price</th>
      </tr>
    </thead>
    <tbody>
      <tr data-ng-repeat="s in salesRecords | filter:searchText:strict">
        <td>{{s.sale_id}}</td>
        <td>{{s.TotalItems}}</td>
        <td>${{s.orderTotal}}</td>
        <td>
          <a href="#!ViewSingleSale" data-ng-click="displaySingleSale(s.sale_id)"><button class="btn btn-primary">View</button></a>
          <button class="btn btn-danger">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

So wall of text taken into consideration, what am I doing wrong? I will admit I'm not too familiar with AngularJS so this might be a very amateur mistake on my part.

Not directly related to the question, but the head section should be in the main application HTML and not in each of the templates. The templates should contain only the HTML section that is used in the route/component/directive. — nomæd
– nomæd, Commented Oct 14, 2018 at 7:16
It looks like when clicking on the button, you do 2 things: 1. Call a method to retrieve the data from current controller (on-click) 2. Change the route (<a href>), thus unloading the controller — nomæd
– nomæd, Commented Oct 14, 2018 at 7:20
Thats strange, I thought the 2 pages are using the same controller (salesRecordController). Unless moving to the new page wipes the data being sent, I am clueless as to why it is doing it. — Cfusion
– Cfusion, Commented Oct 14, 2018 at 8:02
Okay now I understand. Right so the data is been loaded on the first page and when the new page is loaded, the requested data is unloaded from memory. — Cfusion
– Cfusion, Commented Oct 14, 2018 at 10:00

Cfusion · Accepted Answer · 2018-10-14 10:34:31Z

1

I figured out that the problem was that the values that I wanted to transfer were been wiped when I moved to another page. So I decided to simply display them on the first page instead hyperlinking to another.

answered Oct 14, 2018 at 10:34

Cfusion

196 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular JS Display Response Values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related