3
export class Component implements OnInit {
  constructor(
    private router: Router, 
    private userService: PostGetService, 
    private _Activatedroute: ActivatedRoute
  ) {}

  ngOnInit() {
    this.categoryId = this._Activatedroute.snapshot.params['categoryId'];
    this.userService.searchListingById(Number(this.categoryId))
      .subscribe(res => {
        this.rawdata = res.json();
        console.log(this.rawdata)
      });
  }
}

I have a dropdown menu where I will select a category and based on that category I want to display its related data on another page

I have a response like this i.e. I need to display these details on next page

[{
  "id": 45,
  "installerTitle": "Test112",
  "firstName": "Test112",
  "middleName": "Test112",
  "lastName": "Test112",
  "emailId": "Test112",
  "contactNo": "Test112",
  "password": "Test112",
  "installerType": "Test112",
  "keywords": "Test112",
  "status": "Test112",
  "isActive": 2,
  "desc": null,
  "installerlocation": [{
    "installerLocationId": 12,
    "addresslineOne": "Test112",
    "addresslineTwo": "Test112",
    "addresslineThree": "Test112",
    "city": "Test112",
    "state": "Test112",
    "zipcode": "Test112",
    "gecodeX": 2,
    "gecodeY": 2,
    "isActive": 2,
    "status": "Test112"
  }],
  "installerPayment": [{
      "installerPaymentId": 16,
      "installerStripeId": "cus_DdJsIWh9ake0Bc",
      "installerAmt": null,
      "status": 1
    },
    {
      "installerPaymentId": 16,
      "installerStripeId": "cus_DdJsIWh9ake0Bc",
      "installerAmt": null,
      "status": 1
    },
    {
      "installerPaymentId": 16,
      "installerStripeId": "cus_DdJsIWh9ake0Bc",
      "installerAmt": null,
      "status": 1
    }
  ],
  "installersocial": [{
    "installerSocialId": 11,
    "socialType": "Test112",
    "socialUrl": "Test112",
    "facebookUrl": "Test112",
    "twitterUrl": "Test112",
    "vkontakeUrl": "Test112",
    "whatsappUrl": "Test112"
  }],
  "installerworktiming": [{
    "installerTimeId": 12,
    "locationId": 2,
    "dayId": 2,
    "timeFrom": 2,
    "timeTo": 2,
    "isHoliday": 2,
    "timeSunday": "Test112",
    "timeMonday": "Test112",
    "timeTuesday": "Test112",
    "timeWednesday": "Test112",
    "timeThursday": "Test112",
    "timeFriday": "Test112",
    "timeSaturday": "Test112"
  }],
  "installerserviceModel": [{
      "installerServiceId": 13,
      "category": {
        "categoryId": 35,
        "categoryName": "Test101",
        "categoryDesc": "Test101",
        "categoryServicemodel": [{
          "serviceId": 8,
          "serviceName": "Test101",
          "serviceDesc": "Test101",
          "isActive": 1
        }],
        "active": 1
      },
      "categoryServiceModel": {
        "serviceId": 8,
        "serviceName": "Test101",
        "serviceDesc": "Test101",
        "isActive": 1
      }
    },
    {
      "installerServiceId": 12,
      "category": {
        "categoryId": 17,
        "categoryName": "Test98",
        "categoryDesc": "Test98",
        "categoryServicemodel": [{
            "serviceId": 7,
            "serviceName": "Test98",
            "serviceDesc": "Test98",
            "isActive": 8
          },
          {
            "serviceId": 13,
            "serviceName": "Test115",
            "serviceDesc": "Test115",
            "isActive": 1
          }
        ],
        "active": 8
      },
      "categoryServiceModel": {
        "serviceId": 7,
        "serviceName": "Test98",
        "serviceDesc": "Test98",
        "isActive": 8
      }
    },
    {
      "installerServiceId": 11,
      "category": {
        "categoryId": 7,
        "categoryName": "Test Name",
        "categoryDesc": "Test Description",
        "categoryServicemodel": [{
          "serviceId": 6,
          "serviceName": "serv name test",
          "serviceDesc": "serv desc test",
          "isActive": 1
        }],
        "active": 0
      },
      "categoryServiceModel": {
        "serviceId": 6,
        "serviceName": "serv name test",
        "serviceDesc": "serv desc test",
        "isActive": 1
      }
    }
  ]
}]

These are the details I want to get on one of the category id selection I don't want to display all details on few details that is name, email, contact number.

2
  • And what exactly is your problem? Are you not getting the updated categoryId in your Component? I think that's the problem. And that's because you didn't subscribe to this._Activatedroute.params and instead used this._Activatedroute.snapshot.params
    – SiddAjmera
    Sep 24, 2018 at 9:08
  • no i am getting the data but whats my issue is when i clicked on search all details will come my issue is how to bind this dropdown value to search button
    – chethu
    Sep 24, 2018 at 9:09

1 Answer 1

1

first i created service in service.ts file

 searchListingById(categoryId: number): Observable<any> {

 if(categoryId == 0 || categoryId == undefined){
   return this.getListings().delay(100)
  }else{
   return this.http.get( this.searchCatUrl+categoryId).delay(100);
  }
}

from here i am passing selected dropdown id to search based on that selected id .... then i am calling above service method from my component.ts file

 this.userService.searchListingById(this.categoryId)
     .subscribe(res => {              
        this.categoryRawdata = res.json();             
       });

and values will be stored in categoryRawdata variable and in component.html bind values using this variable

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.