How to make search functionality in angular

Question

Please help me with this error I am getting this kind of object from the backend.

[
    {
        "_id": "623271addac895c8203c608d",
        "topic": "Liver",
        "subject": "Science",
        "userId": "6230ab6516f17ed82cbce749",
        "__v": 0
    },
    {
        "_id": "623482efa8575c84edcdb2ef",
        "topic": "Liver",
        "subject": "Science",
        "userId": "6230ab6516f17ed82cbce749",
        "__v": 0
    }
]

I have a search function which search the topic.

this is my HTML code

<input (keyup)="searchData($event)" type="text" class="form-control" placeholder="Search" aria-label="Searchbox" aria-describedby="basic-addon1">
<span *ngFor="let topic of topics | keyvalue">{{topic}}</span>

This is my ts code

 topics: any 
  searchData(event: Event) {
    this.topics = (event.target as HTMLInputElement).value;
    console.log(this.topics)
    this.topicService.searchTopic(this.topics).subscribe(res => {
      console.log("Filter Response", res);
      this.topics = Array.from(Object.values(res))
    },
      (err) => {
        console.log(err);
        console.log("error")
      })
  }

this is my service code

 searchTopic(data: any): Observable<any> {
    return this.http.get(`${api_path}/search?topic=${data}`)
  }

On search, i am getting this response instead of getting topic name I am getting object object. i have two topic named liver so I am getting two object instead of getting the name of topic

Slawa Eremin · Accepted Answer · 2022-03-18 22:49:59Z

1

Try to get field topic from the object

<span *ngFor="let item of topics | keyvalue">{{item.topic}}</span>

answered Mar 18, 2022 at 22:49

Slawa Eremin

5,42521 silver badges29 bronze badges

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

Comments

skouch2022 · Accepted Answer · 2022-03-19 05:41:05Z

0

I think you need to access them using the .key and .value when you use the keyvalue pipe.

<div *ngFor="let topic of topics | keyvalue">
      {{topic.key}}:{{topic.value.topic}}
</div>

Here is the Angular official site example

I also not sure why you use the pipe either. You can just the following to get the value.

<div *ngFor="let topic of topics">
  {{topic.topic}}
  {{topic.subject}}
</div>

edited Mar 19, 2022 at 5:41

answered Mar 19, 2022 at 5:33

skouch2022

1,1791 gold badge6 silver badges17 bronze badges

3 Comments

Calypso Over a year ago

I used keyvalue pipe because without that I am getting that error: ERROR Error: NG0900: Error trying to diff 'liver'. Only arrays and iterables are allowed.

Calypso Over a year ago

I have used it without pipe now I am getting the topic name in result instead of object object but I have error in console now Error: NG0900: Error trying to diff 'liver'. Only arrays and iterables are allowed. Can you please tell me how to solve it? @skouch2022

skouch2022 Over a year ago

@Calypso Could you please update your question with what you just tried? Please include the code and error messages too. This way, I can understand the issues and might be able to point you to the right direction. One more thing, you mentioned at the beginning of your question how the backend API return, but look like you tried to get the values. this.topics = Array.from(Object.values(res)). Could you also edit your question and show us the real shape of the object return from the API?

Collectives™ on Stack Overflow

How to make search functionality in angular

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related