Cannot reach property of object AngularFire2/Typescript

Question

I added a search bar to my project, and took the code from ionic docs

 getItems(ev: any) {

    this.initializeItems();

    const val = ev.target.value;

    if (val && val.trim() != '') {
      this.items = this.items.pipe(filter(item => {
        console.log(item);
        let t = item.title;
        return (t.toLowerCase().indexOf(val.toLowerCase()) > -1);
      }))
    }
  }

This is how I'm initializing the items

initializeItems(){
    this.items = this.newslist;
  }

And in the constructor

this.newslist = afDB.list('information/news', (ref) => ref.orderByChild('inverteddatetime')).snapshotChanges().pipe(
        map(actions => 
          actions.map(a => ({ key: a.key, ...a.payload.val() }))
        )
      );

The error that I'm getting is at let t = item.title; where "title" is underlined red with the message

Property "title" does not exist on type {}

When I log item in console.log(item); I get the correct results back though with their appropriate properties:

    (2) [{…}, {…}] 
0:{
datetime:"Saturday, June 23, 2018 12:28 AM"
image:"data:image/jpeg;base64,/9j/4..."
inverteddatetime:-1529703181246
key:"-LFdPXgxgAQA1RVnGmMD"
subtitle:"Water can cause problems, be wary of the things."
text:"Water quality is a subject that’s been big news lately. Residents of Flint, Michigan are suffering from toxic levels of lead in ..."
title:"12 Toxins in Your Drinking Water"
}

1 : {key: "-LFXmks2UICxqTNkicNv", datetime: "Thursday, June 21, 2018 5:35 PM",  subtitle: "Unfortunate problems", …} length : 2
    __proto__ : Array(0)

Data Structure: Firebase Data Structure (I don't have enough reputation to display it on the thread)

I have a simple question, I don't understand why I can't reach the property "title" of the item although when I log it it shows all items and their properties. Is it because it's returning JSON and I should map it to an array?

Can you share the error you are getting and also what you see in console log? — Sergey Rudenko
– Sergey Rudenko, Commented Jun 22, 2018 at 17:27
So wait your console log lists array with objects that have subtitle but not title property, can you clarify what do you mean console returns proper data for you? — Sergey Rudenko
– Sergey Rudenko, Commented Jun 22, 2018 at 22:38
@SergeyRudenko Yes my bad, I did not expand the result, the console log does show title just like it shows subtitle and datetime which are properties of the object. — Kode Ch
– Kode Ch, Commented Jun 23, 2018 at 10:50

Sergey Rudenko · Accepted Answer · 2018-06-24 22:51:00Z

0

This is type error that occurs since typescript is not “aware” of your object’s (“item” in this case) data shape. Normally you would want to type it and thus resolve it, like this:

let t = (item as any).title

But in your case here it seems like you are trying to apply filter similarly how someone did that in this issue: Observable of array with filter using Angular 5 with RxJS

Your solution should be 1:1 similar: apply .map onto the observable you have (this.items.map( etc ) )

Like this:

getItems(ev: any) {

    this.initializeItems();

    const val = ev.target.value;

    if (val && val.trim() != “”) {
      this.items = this.items.map( items => items.filter( item => :::your filter condition here:::))
  }
}

edited Jun 24, 2018 at 22:51

answered Jun 23, 2018 at 11:35

Sergey Rudenko

9,2653 gold badges33 silver badges52 bronze badges

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

13 Comments

Kode Ch Over a year ago

It worked in terms of title no longer displaying an error, but now when I console log t it shows "undefined". I edited the question so that you can see one of the items' full properties.

Sergey Rudenko Over a year ago

Ok then can you help me understand very clearly - when you console log exactly “item” (not itemS) what do you get? you are getting array of objects?

Kode Ch Over a year ago

Yes exactly. "item" is returning an array of objects

Sergey Rudenko Over a year ago

Sorry not sure my other comment went through, can you console.log(this.items) please

Kode Ch Over a year ago

console.log(this.items) returns the following: Observable {_isScalar: false, source: Observable, operator: FilterOperator} operator : FilterOperator {predicate: ƒ, thisArg: undefined} source : Observable {_isScalar: false, source: Observable, operator: MapOperator} _isScalar : false proto : Object

|

Collectives™ on Stack Overflow

Cannot reach property of object AngularFire2/Typescript

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related