How can I select one object in an JSON array based on the user input in Ionic 3?

Question

I am following an tutorial in Ionic 3 about HTTP. I have made a data provider called data.ts. This is my method:

data.ts

 getRemoteData() {
    return this.http.get(this.statusUrl);
  }

I am calling this method in home.ts like this:

home.ts

 ionViewDidLoad() {
    this.dataService.getRemoteData().subscribe(data => console.log(data));
  }

This is my result in my google dev tool from console.log(data):

 [{"status":"P","plate":"test2","code:"MGP150151","message":"fail"}
,{"status":"P","plate":"test3","code":"MGP160298","message":"fail"}
,{"status":"P","plate":"test4","code":"MGP140085","message":"succes"}
,{"status":"O","plate":"test5","code":"MGP150175","message":"succes"}]

The data provider is working good. Now my problem is I want to select just one object in this array. For example: the user enters test3 based on plate and the app must return this result:

{"status":"P","plate":"test3","code":"MGP160298","message":"fail"}

Then I am binding like this:

<ul>
    <li *ngFor="let jsondata of data>
      <span>{{jsondata.plate}}</span>
    </li>
</ul>

I have searched over the internet and I found something like this:

https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/find

I don't know how to use this on my JSON object array.

Can someone point me in the right direction?

Kind regards

Source I used:

https://www.joshmorony.com/loading-remote-json-data-with-http-in-ionic-2/

https://angular.io/guide/http

See https://stackoverflow.com/questions/13964155/get-javascript-object-from-array-of-objects-by-value-of-property — ADyson, Nov 07 '18 at 11:39

Sunil Singh · Answer 1 · 2018-11-07T12:51:41.617

0

you can use below snippet to find the specific object

    selectedItem;

    this.dataService.getRemoteData().map((res: Response) => res.json()).subscribe(
    data => {
               this.data = data.find(item=> item.plate == $plate)
            }
    );

Note : $plate dynamic value, so must pass the value for it.

edited Nov 07 '18 at 12:51

answered Nov 07 '18 at 11:39

Sunil Singh

11,001
2
27
48

Hi Sunil thanks for your time. I hardcoded a value to test if it works. This is what I have now: `this.selectedItem = data.find(item => item.plate == "test3")` and I get an error on `data`: ``Property 'find' does not exist on type 'Object' – Fearcoder Nov 07 '18 at 11:46
so the response is not Array type. Can you print `data` and check what values you get. – Sunil Singh Nov 07 '18 at 11:49
yes I posted it below this sentence: This is my result in my google dev tool from console.log(data). It's an array with JSON objects. – Fearcoder Nov 07 '18 at 11:51
Here is the sample demo which is working on sample data given https://stackblitz.com/edit/angular-r4gkd3 – Sunil Singh Nov 07 '18 at 12:05
I think I understand you. First I need to convert this call `this.dataService.getRemoteData().subscribe(data => console.log(data));`into an array variable before I can use the find function. – Fearcoder Nov 07 '18 at 12:16
Right, you should convert it to `Array` before using `find` function. – Sunil Singh Nov 07 '18 at 12:18
Alright I did this: `var arr = this.dataService.getRemoteData().subscribe(data => { [data] }) var obj = arr.find(item => item.plate == "test2"); console.log("found ", obj);` but still can't use the `find` function. – Fearcoder Nov 07 '18 at 12:24
Are you using http or HttpClient ? – Sunil Singh Nov 07 '18 at 12:26
Yes I am using this: `import { HttpClientModule } from '@angular/common/http';` – Fearcoder Nov 07 '18 at 12:42
Updated the answer with http – Sunil Singh Nov 07 '18 at 12:52
I have read about this solution in this post: https://stackoverflow.com/questions/46630893/angular-res-json-is-not-a-function I used your solution and still problems with `data.find()` – Fearcoder Nov 07 '18 at 13:00

score 0 · Answer 2 · answered Nov 07 '18 at 11:56

0

If your data contains test3 more than once and you need to use filter

this.dataService.getRemoteData().subscribe(data => { items = data.filter(item => item.plate === 'enter what you need')});

If you want a data, use find

this.dataService.getRemoteData().subscribe(data => { item = data.find(item => item.plate === 'enter what you need')});

answered Nov 07 '18 at 11:56

sekoli

1

Thanks for you time. I have test both solutions and I get an error on `data.find` and `data.filter`. The same error of the solution above. Property 'find' and 'filter'. – Fearcoder Nov 07 '18 at 12:03
Can you change `getRemoteData() { return this.http.get(this.statusUrl); }` function to `getRemoteData() { return this.http.get(this.statusUrl).map(response as json); }`. Then you should try find operation. If you still get same error, make sure your data object array. – sekoli Nov 07 '18 at 14:23

score 0 · Accepted Answer · edited Nov 08 '18 at 02:16

0

I have changed the URL and passed a query parameter. This is my code now:

getResults(plate) {  
    this.dataService.getRemoteData(plate).subscribe(data => this.jsondata = data)
  }

This is working fine!

edited Nov 08 '18 at 02:16

Pang

9,564
146
81
122

answered Nov 08 '18 at 01:58

Fearcoder

753
3
15
47

How can I select one object in an JSON array based on the user input in Ionic 3?

3 Answers3