Angular 2+, two way binding, search json Object and display results issue

Question

I have the following Js/Json. I am trying to create a search box so I can search the item in the list. From the api I am getting the below object. It has 2000 items, that I would like to do a search on. When I type in a search, it should update the found items that includes the typed in words real-time(two way binding)

I think using a Pipe is too slow? I struggle to understand whether this is a jsObject or json object.

Also if I search of it it will display 1900 results how do I limit those results to 8?

I tried several pipes and the below loop but this doesn't work.

objectFromApi = {"item1": "valueItem1, "item2", "valueItem2}
var keys = []
var keys = Object.getOwnPropertyNames(objectFromApi)
 for(var i=0;i<keys.length;i++){
    if(keys[i].indexOf(str) != -1){
       this.resultArr.push(keys[i]);
    }
  }

lf303 · Accepted Answer · 2018-03-28 20:18:25Z

1

I created a stackblitz to show you what i would do: https://stackblitz.com/edit/angular-vzjw4c

first register a formControl that you'll bind to your input, then get its valuechanges.

everytime you type something you filter the keys provided in the object you get from your api.

Hope i helped, if you need more explanation, i'll be glad to help out

answered Mar 28, 2018 at 20:18

lf303

1041 silver badge6 bronze badges

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

3 Comments

oudekaas Over a year ago

Thank you it works!!! Is there a way to display the value of the item as well so that it displays both the item and the value? But only searches for the item. How would I go about formatting so that it only shows 8 results in a HTML element. Rather then 100 results?

oudekaas Over a year ago

What could work for me, is show the results in a table let's you type item1, it then gives item11 item12 item13 until item 21which I then want to select. Once the selection is made it will show the value of the key. If I select item12 out of the 10 options displayed it will then show the value of item12. I can get the value now, so I am just trying to make the search results selectable. I think I can make it work by just making buttons out of each result. Is there a way to use [(NGmodel)] in the form or something like that. So I can update the input value to the selected value?

lf303 Over a year ago

Think as your form control instance as a wrapper of ngmodel, which gives you informations concerning the way you interact with the data you initially set in your form control. In your case you shoud have a function that sets a new value for your formcontrol. this.searchInputFG.controls.searchInputFC.setValue(newValue);

Collectives™ on Stack Overflow

Angular 2+, two way binding, search json Object and display results issue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related