I can't access fields values of data fetched from Ngrx entities selector

Question

I'm struggling to access the "firstname" properties of the "prsnl" data fetched from ngrx entities, because the prsnl data as you can see on the screenshot of the redux devtool, is in a format that I'm not used to, with fields like "ids" and "entities"

I know that the data's field are inside the "entities" but I can't get like "firstname" from there. This is how I selected prsnl data from the store with the createSelector:

export const selectAllPrsnls = createSelector(
    selectPrsnlState,
    prsnlsState => {
        const allPrsnls = Object.values(prsnlsState)
        return allPrsnls;
    }
);

And then I fetched it like like:

getAllPersnlValues() {
    this.store
    .pipe(select(selectPrsnlState), map((prsnlList) => prsnlList))
    .subscribe(value => this.allprsnl = value.entities);
    console.log("All prsnl", this.allprsnl)
  }

And the console.log("All prsnl", this.allprsnl) yields this result as in console:

But I can't access the fields because each entity in there is attached to an ids, I just want to get prsnl's firstname or fullname without the extra informations of entities. Thanks you in advance !

Answer 1

Both your console and the redux devtools are telling you that this.allprsnl = value.entities is returning you an object of nested objects like this :

All Prsnl:
{
   ids: [1, 2, 3],
   entities: {
     1: {id:1, firstname: "Some title", fullname: "Some fullname",likes: 
          {count: 1}},
     2: {id:2, firstname: "Some title", fullname: "Some fullname" likes: 
          {count: 1}},
     3: {id:3, firstname: "Some title", fullname: "Some fullname" likes: 
          {count: 1}}
   }
}

As you can see the returned response is an object containing ids which is an array of ids, and entities which is itself and object of objects nested into ids. This is why you can't access directely the properties {id, firstname, fullname, ect..} which are nested inside ids, even by calling .subscribe(value => this.allprsnl = value.entities) you still get object of objects. So my suggestion for you is to transform the object of objects into array of object. A way of doing that in javascript is by using Objects.entries So your subscriptions should become something pretty much like this:

getAllPersnlValues() {
    this.store
    .pipe(select(selectPrsnlState), map((prsnlList) => prsnlList))
    .subscribe(value => this.allprsnl = Objects.entries(value[1]).map((e) => ( e[1]));
    console.log("All prsnl", this.allprsnl)
}

With this approach you console should look something like:

All Prsnl:

[
   {id:1, firstname: "Some title", fullname: "Some fullname",likes: 
          {count: 1}},
   {id:2, firstname: "Some title", fullname: "Some fullname" likes: 
          {count: 1}},
   {id:3, firstname: "Some title", fullname: "Some fullname" likes: 
          {count: 1}}
]

And then you can just access do this.allprsnl.fullname to get the elements' full name. Note: Ngrx-entities mappes by default to something similar to this:

Objects.entries(value1).map((e) => ([e[0]]:e1));

And the value[1] is to say that you only want data inside entities objects which holds the second place in the array.