All geek questions in one place

Display search results using Angular

I am working on a project and I cannot make an API request on Node.js + MongoDB using AngularJS.

I have an api route created as such:

app.get("/search_database/:queryString", function(req, res) { ... });

And I'm trying to create something on the interface using Angular to display these results (in raw JSON) in the browser - to no avail. The API requests from the browser show what I want, but I want to be able to do the same with AngularJS.

Any guidance appreciated! Thank!

This is what I have so far:

test.html

<html ng-app="test">
 <head>
    <meta charset="utf-8">
    <title>Angular.js JSON Fetching Example</title>
       <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
     <script> src="core.js"</script>
   </head>

  <body ng-controller="searchCntrlr">
      <div>
      <input class="search-bar-input", ng-model="searchText"/>
      </div>

   {{results}}
   </body>


</html>

core.js

var app = angular.module("test",[]);

app.controller('searchCntrlr', $scope, $http) {
    $http.
      get('/search_database/:searchText/' + $scope.searchText).
      success(function(res){
        $scope.results = res.data;
      });
  };
+4
source share
2 answers

So, I understood my problem - a bunch of cruel typos:

Fixed test.html (typo was in for the core.js)

<html ng-app="test">
  <head>
    <meta charset="utf-8">
    <title>Angular.js JSON Fetching Example</title>
       <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
     <script src="core.js"></script>
   </head>

  <body ng-controller="searchCntrlr">
    <div>
      <input class="search-bar-input", ng-model="searchText" ng-change="search()"/>
    </div>

    {{results}}
  </body>

</html>

core.js( app.controller)

var app = angular.module("test",[]);

app.controller('searchCntrlr', ['$scope', '$http', function($scope, $http) {
  $scope.search = function() {
    $http.
    get('/search_database/' + $scope.searchText).
    success(function(res){
      $scope.results = res;
    });

  }
}]);
+1

:

var app = angular.module("test",[]);

app.controller('searchCntrlr', $scope, $http) {
  $scope.search = function() {
    $http.
    get('/search_database/:searchText/' + $scope.searchText).
    success(function(res){
      $scope.results = res.data;
    });

  }
};

:

<input class="search-bar-input", ng-model="searchText" ng-change="search()"/>

$watch .

0

Source: https://habr.com/ru/post/1657686/

More articles:


All Articles