Dynamic HTML partial based on REST response

Question

I have an application I am building using an Angular JS front end and a REST-based API back end feeding a MySQL database. There are REST calls made from the front end to the back end to populate or retrieve data in the database. I want to add a drop down selection box to my angular JS front end home page. I want the selection to trigger a REST call to the database, to retrieve a specific value and have that value become a part of a dynamically loaded html partial.

As an example, the drop down would select a model of a car (Toyota Corolla, Honda Accord, etc.) When you select that model, the controller would make a REST call to the appropriate table(s) to get the rest of the information for that car (MPG, size, weight, etc.) Once it did this, it would load a partial HTML on the page that was a template HTML file but with dynamic content. So the page loaded would be /#/carInfo?toyotaCorolla. The template partial html file would load and then the tables on the template would populate with the response from that REST call. So I would essentially have a single template for that page, but it would call a new VERSION of the page based on what was selected.

I am thinking about this in my head and I do not have my application code with me. This question is not for the actual code solution, but for someone to either write up some pseudo code or point me to a demo/example online that is similar to this...if it is even possible. I am doing searches on my own, but I may be searching for the wrong terminology to get this accomplished. Any pointers or help on this would be appreciated.

UPDATE: Now that I am home, here is a snippet of the code I am having issues with.

<ul class="nav navbar-nav">
    <li><a href="#/home" class="mdi-action-home"></a></li>
    <li class="dropdown">
        <a href="javascript:void(0)" data-target="#" class="dropdown-toggle" data-toggle="dropdown">
            Select a car...
            <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li ng-model="selectedCar.value" ng-repeat="x.car for x in cars"
                ng-change="selectedCarChanged()"></li>
        </ul>
    </li>
</ul>

That is not populating correctly. I have the same ng code for a <select> implementation using ng-options instead of ng-repeat. I was hoping it would be a simple transition, but the CSS version using the lists is not working.

"I want the selection to trigger a REST call to the database, to retrieve a specific value and have that value become a part of a dynamically loaded html partial." Looks like what you are looking for is the use of AJAX. Angular uses $http for AJAX calls. — Spencer Wieczorek
– Spencer Wieczorek, Commented Apr 7, 2017 at 17:31

Srigar · Accepted Answer · 2017-04-07 19:03:50Z

2

Please find the code snippet below. Hope this will be helpful

car-list.html

<div ng-controller="carListController">
    <select ng-model="selectedCar" ng-change="onSelectCar(selectedCar)">
        <option ng-repeat="car in cars">{{car}}</option>
    </select>
</div>

carListController.js

app.controller('carListController', function($scope, $location) {
    $scope.carList = ['Honda', 'Toyota', 'Suzuki', 'Hyundai'];
    $scope.onSelectCar = function(car) {
        $location.path('#/carInfo').search({carInfo: car});
    }
});

carInfo.html

<div class="carDetails">
    <span>Car Name: {{car.name}}</span>
    <span>Car Model: {{car.model}}</span>
    <span>Car Year: {{car.year}}</span>
    <span>Car Size: {{car.size}}</span>
</div>

carInfoDetailsController.js

app.controller('carInfoController', function($scope, $location, $http) {
    $scope.car = {};
    $scope.init= function() {
        $http.get('url/' + $location.search('carInfo'), function(response) {
              $scope.car = response;
        });
    };

    $scope.init();
});

appConfig.js

app.config(function($routeProvider){
     $routeProvider.when('/carInfo'{
         templateUrl: "carInfo.html",
         controller: "carInfoController"
     });
});

answered Apr 7, 2017 at 19:03

Srigar

1,6983 gold badges14 silver badges29 bronze badges

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

1 Comment

Chris Moretti Over a year ago

This is definitely what I needed. Only thing that is throwing me off is that I am not using a standard <select> implementation. I am using CSS with a <li class="dropdown"> <a href="javascript:void(0)" data-target="#" class="dropdown-toggle" data-toggle="dropdown"> Select a car... <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#/about">Test</a></li> </ul> </li>

InaMastabba · Accepted Answer · 2017-04-07 19:33:24Z

something like:

  //in a service    
  (function() {
    function MyService($http) {
        var myService = {};
        MyService.accessMultiTool = function(){
          var args = Array.from(arguments);
          var method, url, authorization;
          args.forEach(function(item){
            if('method' in item){
                    method = item.method;
                }else if ('url' in item){
                    url = item.url;
                }else if ('authorization' in item){
                    authorization = item.authorization;
            }
          });
        delete $http.defaults.headers.common['X-Requested-With'];
        return $http({
                      method: method,
                      origin: 'http://someclient/',
                      url: url,
                      headers: {'Authorization': authorization}
               }).error(function(status){generate some error msg});
       };

    return MyService;
    }

    angular
        .module('myApp')
        .factory('MyService', ['$http', MyService]);
  })();

  //in a controller
  (function () {
      function MyCtrl(MyService) {
          var myController = this;
          this.car_model_options = ["Honda", "Chevy", "Ford", "Nissan"];
          this.bound_car_model_obj = {
             model: null
          };
          this.getCarModel = function(){
            MyService.accessMultiTool({method: 'GET'}, {url: 'http://somebackend/api/cars/' + myController.bound_car_model_obj.model}, {authorization: this.activeMember.auth}).then(function(data){
            myController.setCurrCarModel(data);
          });
          this.setCurrCarModel = function(data){
            myController.currently_selected_car_model = data;
          };
      };

    };

  angular
    .module('myApp')
    .controller('MyCtrl', ['MyService', MyCtrl]);
  })();

  //in a template
  <div ng-controller="MyCtrl as mycontroller">
    <select data-ng-init="this.bound_car_model_obj.model = mycontroller.car_model_options[0]" data-ng-model="this.bound_car_model_obj.model" data-ng-options="option for option in mycontroller.car_model_options" >
    </select>

    <table>
      <tr ng-repeat="car in mycontroller.currently_selected_car_model>
        <td>{{car.someproperty}}>/td> 
        <td>{{car.someotherproperty}}>/td>
      </tr>
    </table>
  </div>

Collectives™ on Stack Overflow

Dynamic HTML partial based on REST response

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related