0

Hellow there. thanks for clicking on this post. i would like to know how do i get/query data from mongodb based on the input field. example is if i were to input "USA" in the input field named" location" it will only get data that has USA in it and the data will be displayed on the next page. How do i get this to work when i click on a button. i will link some screenshots of my webite and code(i have a feeling my code is completely wrong.)

error im facing after pasting ur code and code for passing data

this is my home.component.html line40. it is to pass the data to next page

home page where i will be inserting a country in the enter country field, once i click on "find" it will GET data from mongo based on the country ive insertted.

this is the page where the data will be displayed

here is some codes ive tried to mess around with(havent tested if it works) 

 //this is in my api.js file
//get data from "listing"(which is my db collection) based on "inputcountry( the inputfield)"
router.get('/home', function(req, res) {
    db.collection('listing').find({"inputCountry": req.body.inputCountry}).toArray( (err, results) => {
        console.log('got search')
        res.send(results)});
    });


//this is in my service .ts file (named getservice)
//this is for the searching of house based on location
  searchHouse() {
    return this.http.get<any[]>('./api/home');
    }
    
    //this is in my home. component.ts file (where the searching will happen)
     constructor(private fb: FormBuilder, private router: Router, private getService: GetService) {
  // Retrieve posts from the API
    this.getService.searchHouse().subscribe(searchedhouses => {
    this.searchedhouses = searchedhouses;
  });
  }
  
<!--this is in my home.component.html where there is the input field named "inputcountry" and submit button -->

 <form [formGroup] = "myForm" (ngSubmit) = "searchHouse (myForm)">
            <div class="form-group">
            <label for="inputCountry">Enter Country</label>
            <input type="text" class="form-control"  formControlName="inputCountry" id="inputCountry"   name = "inputCountry" placeholder="Location e.g Singapore              .">
            </div>
            
              <button class="btn btn-lg btn-primary btn-block text-uppercase" routerLink="/houses" type="submit" >Find</button>
     
            </form>
Lonely Bat
  • 35
  • 1
  • 9

2 Answers2

0

You need to use regexp in order to search data in mongodb as per your input field.

https://docs.mongodb.com/manual/reference/operator/query/regex/

Abdul Rahim Shaikh
  • 47
  • 6
0

well, so as per the code,

in the backend code, for the api, you can place a Regexified input, for the expected output,

router.get('/home', function(req, res) {
    db.collection('listing').find({"inputCountry": { $regex: req.query.inputCountry ,$options: 'i' }}).toArray( (err, results) => {
        console.log('got search')
        res.send(results)});
    });

this above code will give you the results in the output. which you can show in next page may be in frontend.

in angular there is many better approach is available for short you can do something like this:

 onSubmit = function (allValues) {
    console.log(allValues);
    this.http.get("http://localhost/home?inputCountry="+allValues.inputCountry).subscribe((data) => {
   //you will get the result here, show that to user. 
});
  };


<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)">
  <div class="form-group">
    <label for="inputCountry">Enter Country</label>
    <input
      type="text"
      class="form-control"
      formControlName="inputCountry"
      id="inputCountry"
      name="inputCountry"
      placeholder="Location e.g Singapore              ."
    />
  </div>

  <button
    class="btn btn-lg btn-primary btn-block text-uppercase"
    routerLink="/houses"
    type="submit"
  >
    Find
  </button>
</form>
Saikat Chakrabortty
  • 2,520
  • 4
  • 22
  • 39
  • but how do i show them in another page.component.html instead of in the url? – Lonely Bat Jan 20 '19 at 13:34
  • can i use routing to pass the data i retrieved ? from one component to another. so as for my case pass data from home component to the next component? – Lonely Bat Jan 20 '19 at 13:35
  • i guess this can help you, with how to pass data to some other component: https://stackoverflow.com/questions/36835123/how-do-i-pass-data-to-angular-routed-components?answertab=votes#tab-top – Saikat Chakrabortty Jan 20 '19 at 13:40
  • and btw what u do mean by this --->> //you will get the result here, show that to user. – Lonely Bat Jan 20 '19 at 14:12
  • that is just a comment, where you will get the data, and you can use that data to show , may be you can show it there only, or you can send it t somewhere else as well. – Saikat Chakrabortty Jan 20 '19 at 14:16
  • ok thanks for the clarification ill use the routing.ts to pass my data since i know how to. – Lonely Bat Jan 20 '19 at 15:02
  • IM getting an erro bro. i inspect console on google chrome and this is what it shows . ill paste the error above – Lonely Bat Jan 20 '19 at 17:59
  • hey there is there any other way to communicate with you. its quite hard to show u recent updates about errors and stuff.? maybe add me on facebook and we will go from there? James Franco Hadi on facebook. – Lonely Bat Jan 20 '19 at 18:28
  • i am not able to successfully pass the data to another page . pls help me sir – Lonely Bat Jan 21 '19 at 12:44