Create array with just one of the object's data | Angular Community | Page 1

dusk canyon Oct 19, 2022, 6:09 PM

#

certDupliIds = this.certsDupli.map(cert => cert.certDupli_id);

#

What I posted will give you an array like this```ts
[1, 3, 4, 5]

Is that not what you wanted?

analog oracle Oct 19, 2022, 6:16 PM

#

it would be something like this ts let cphas_dupli: this.certidao.cphas.map(cert => cert.certDupli_id);

dusk canyon Oct 19, 2022, 6:19 PM

#

That syntax is not. Probably want this```ts
let cphas_dupli: number[] = this.certidao.cphas.map(cert => cert.certDupli_id);

rose oriole Oct 19, 2022, 6:19 PM

#

Post a snippet of your actual data as JSON/JS Object notation if you want my help. 🙂

dusk canyon Oct 19, 2022, 6:19 PM

#

Your going to have to post more because I don't know the name of your variables

analog oracle Oct 19, 2022, 6:21 PM

#

rose oriole Post a snippet of your actual data as JSON/JS Object notation if you want my hel...

ok

#

my function: ```ts
duplicadas() {

let cphas_dupli: Array<any> = this.certidao.cphas?.certDupli_id;

console.log(this.certidao.cphas);

this.certService.dupliById(cphas_dupli)
  .subscribe({
    next: (certDupli) => {
      this.certsDupli = certDupli;
    }
  });

}```

rose oriole Oct 19, 2022, 6:21 PM

#

Don't use any it just makes things harder.

dusk canyon Oct 19, 2022, 6:22 PM

#

You need to assign cphas_dupli inside the next function

rose oriole Oct 19, 2022, 6:22 PM

#

and since your variables aren't in english I cannot understand what they mean

analog oracle Oct 19, 2022, 6:22 PM

#

return the console.log (4) [{…}, {…}, {…}, {…}] 0 : {id: 1, certidao_id: 2, certDupli_id: 1, created_at: '2022-10-19T14:20:26.000000Z', updated_at: '2022-10-19T14:20:26.000000Z', …} 1 : {id: 2, certidao_id: 2, certDupli_id: 3, created_at: '2022-10-19T14:20:26.000000Z', updated_at: '2022-10-19T14:20:26.000000Z', …} 2 : {id: 3, certidao_id: 2, certDupli_id: 4, created_at: '2022-10-19T14:20:26.000000Z', updated_at: '2022-10-19T14:20:26.000000Z', …} 3 : {id: 4, certidao_id: 2, certDupli_id: 5, created_at: '2022-10-19T14:20:26.000000Z', updated_at: '2022-10-19T14:20:26.000000Z', …} length : 4 [[Prototype]] : Array(0)

rose oriole Oct 19, 2022, 6:22 PM

#

analog oracle return the console.log ```(4) [{…}, {…}, {…}, {…}] 0 : {id: 1, certidao_id: 2, ...

That isn't valid JS/JSON

analog oracle Oct 19, 2022, 6:22 PM

#

my service ```ts
/**

Pega os dados da Certidão com duplicidade
@param certidao ICertidao
@returns Observable<ICertidao>
*/
dupliById(cphas_dupli: any[]) {
return this.http.post<Array<ICertidao>>(${AppService.apiUrl}/certidao/dupliById, {
cphas_dupli: cphas_dupli,
});
}

analog oracle Oct 19, 2022, 6:23 PM

#

rose oriole That isn't valid JS/JSON

this is what returns in my browser console

rose oriole Oct 19, 2022, 6:23 PM

#

[
  {
    "foo": "bar",
    "baz": 123,
    "qux": false
  },
  {
    "foo": "bar",
    "baz": 123,
    "qux": false
  },
  {
    "foo": "bar",
    "baz": 123,
    "qux": false
  },
  {
    "foo": "bar",
    "baz": 123,
    "qux": false
  },
  {
    "foo": "bar",
    "baz": 123,
    "qux": false
  }
]

analog oracle Oct 19, 2022, 6:24 PM

#

rose oriole ```json [ { "foo": "bar", "baz": 123, "qux": false }, { "f...

[
    {
        "id": 1,
        "certidao_id": 2,
        "certDupli_id": 1,
        "created_at": "2022-10-19T14:20:26.000000Z",
        "updated_at": "2022-10-19T14:20:26.000000Z",
        "deleted_at": null
    },
    {
        "id": 2,
        "certidao_id": 2,
        "certDupli_id": 3,
        "created_at": "2022-10-19T14:20:26.000000Z",
        "updated_at": "2022-10-19T14:20:26.000000Z",
        "deleted_at": null
    },
    {
        "id": 3,
        "certidao_id": 2,
        "certDupli_id": 4,
        "created_at": "2022-10-19T14:20:26.000000Z",
        "updated_at": "2022-10-19T14:20:26.000000Z",
        "deleted_at": null
    },
    {
        "id": 4,
        "certidao_id": 2,
        "certDupli_id": 5,
        "created_at": "2022-10-19T14:20:26.000000Z",
        "updated_at": "2022-10-19T14:20:26.000000Z",
        "deleted_at": null
    }
]```

dusk canyon Oct 19, 2022, 6:25 PM

#

And you want to collect all the certDeupli_ids in an array right?

analog oracle Oct 19, 2022, 6:26 PM

#

dusk canyon And you want to collect all the certDeupli_ids in an array right?

yes! and send to dupliById

#

this.certService.dupliById(SEND HERE!!)

#

understand?

dusk canyon Oct 19, 2022, 6:26 PM

#

Ok. What I posted originally will do that

#

I don't know the name of the array that holds these objects though so you will have to adjust for that.

analog oracle Oct 19, 2022, 6:27 PM

#

dusk canyon Ok. What I posted originally will do that

It doesn't go because it's in on the return. I need to send the array to return the data I want

dusk canyon Oct 19, 2022, 6:28 PM

#

You are going to have to post the full code

analog oracle Oct 19, 2022, 6:28 PM

#

dusk canyon I don't know the name of the array that holds these objects though so you will h...

this.certidao.cphas```this is where objects are returned

dusk canyon Oct 19, 2022, 6:30 PM

#

analog oracle ```ts this.certidao.cphas```this is where objects are returned

dupliIds = this.certidao.cphas.map(cpha => cpha.certDupli_id);

#

I'm just guessing with the names

#

but dupliIds will hold ts [1, 3, 4, 5]

rose oriole Oct 19, 2022, 6:31 PM

#

This?
https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgCJzHAKgTwA4oDeAsAFDLJJRioCueANsAPrAAmAXMiLQLYBG0ANxkKVMOzgB7Vp259BUEeUpQIGCG2YYuAZzBRQAc2UU2EBhEhadyfYZBHkAH3kMGp5Oy48Bw0cj0bBo2YHoGxi5uHmQAvmRkCFIg+sjBmFzomLgEANoAusgAvMi5ARQkKhTVyABE7LVcAIwANOU1deKSMg1cAExtVR214nSMLL3Ire01I2oh2mCNdX0ADH19ALRNq9sAnFhNACwca6cAbAB0qze3AFq1gx3VtUELGMu1axvbu00Hx1Oqwu11uNweT2edXMlmsi2WPHc7VikIqMxekwG6IoI2gEmCPTYyyxQ1mo3oTFkywAzKjhgh5nCPlwvustjt9ocTmc+lcweDHti6m8mUsWd92X8AdzgbzQWCIULajCrJp4T5aEihij2pUoXVJrSlV0CVT+nSyXixpTJkcLS8GepRZ8Jb9OYCeXz+YrSS8RWrmSs2W7-lygSD+asffrlRZVaEEZqGMi6XqofUiVw7ca8d0zcgSTHyeN8wBWe04x3vMVBn4c0Me2VehWC304-0J8XB+vS8NyyPR9Mq50arU1eKkfIJUhJFJgShWinAACSbF0Gr8UAKxTSGDgl14cDwAApj8BILxMnuchAAJQbxTFAB8Xgvl2LNrYt+UiWSuikliXAwUhGMeADkH4rmuYEtAu1DWlBujfkAA

TS Playground - An online editor for exploring TypeScript and JavaS...

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

analog oracle Oct 19, 2022, 6:31 PM

#

dusk canyon but dupliIds will hold ```ts [1, 3, 4, 5]```

this array I have to pass HEREts this.certService.dupliById(HERE) not into

dusk canyon Oct 19, 2022, 6:32 PM

#

analog oracle this array I have to pass HERE```ts this.certService.dupliById(HERE)``` not into

Well you have to collect them into an array first right?

analog oracle Oct 19, 2022, 6:33 PM

#

dusk canyon Well you have to collect them into an array first right?

I already collected. they here #1032353954895511642 message

dusk canyon Oct 19, 2022, 6:33 PM

#

You aren't making any sense or aren't reading what I'm saying.

analog oracle Oct 19, 2022, 6:35 PM

#

I think you didn't understand me. My English is terrible... I'll try again...

#

I have a certificate(certidão) table that has a foreign key to cphas_dupli...

#

the object the console.log(this.certidao) is this ...

#

inside this return has 'cphas' which is what interests me.

dusk canyon Oct 19, 2022, 6:39 PM

#

I understand

analog oracle Oct 19, 2022, 6:40 PM

#

I need the value of the certDupli_id variables (which are IDs) to fetch the information I want

dusk canyon Oct 19, 2022, 6:41 PM

#

OK. that is what I posted

rose oriole Oct 19, 2022, 6:41 PM

#

And you have that here: https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgCJzHAKgTwA4oDeAsAFDLJJRioCueANsAPrAAmAXMiLQLYBG0ANxkKVMOzgB7Vp259BUEeUpQIGCG2YYuAZzBRQAc2UU2EBhEhadyfYZBHkAH3kMGp5Oy48Bw0cj0bBo2YHoGxi5uHmQAvmRkCFIg+sjBmFzomLgEANoAusgAvMi5ARQkKhTVyABE7LVcAIwANOU1deKSMg1cAExtVR214nSMLL3Ire01I2oh2mCNdX0ADH19ALRNq9sAnFhNACwca6cAbAB0qze3AFq1gx3VtUELGMu1axvbu00Hx1Oqwu11uNweT2edXMlmsi2WPHc7VikIqMxekwG6IoI2gEmCPTYyyxQ1mo3oTFkywAzKjhgh5nCPlwvustjt9ocTmc+lcweDHti6m8mUsWd92X8AdzgbzQWCIULajCrJp4T5aEihij2pUoXVJrSlV0CVT+nSyXixpTJkcLS8GepRZ8Jb9OYCeXz+YrSS8RWrmSs2W7-lygSD+asffrlRZVaEEZqGMi6XqofUiVw7ca8d0zcgSTHyeN8wBWe04x3vMVBn4c0Me2VehWC304-0J8XB+vS8NyyPR9Mq50arU1eKkfIJUhJFJgShWinAACSbF0Gr8UAKxTSGDgl14cDwAApj8BILxMnuchAAJQbxTFAB8Xgvl2LNrYt+UiWSuikliXAwUhGMeADkH4rmuYEtAu1DWlBujfkAA

TS Playground - An online editor for exploring TypeScript and JavaS...

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

#

Now what is next?

analog oracle Oct 19, 2022, 6:44 PM

#

With that I want to throw these IDs in an array(cphas_dupli) so that it returns the information and I load my form with what I need

rose oriole Oct 19, 2022, 6:46 PM

#

That is what you have an array: #1032353954895511642 message

#

So how are you supposed to give that array to your service? All at once? One at a time?

analog oracle Oct 19, 2022, 6:49 PM

#

rose oriole And you have that here: https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghg...

duplicadas() {

    const cphas_dupli: number[] = this.certidao.cphas.map((item: IcertidaoCphasDouble): number => item.certDupli_id);

    this.certService.dupliById(cphas_dupli)
      .subscribe({
        next: (certDupli) => {
          this.certsDupli = certDupli;
        }
      });
  }```  would be something like this

rose oriole Oct 19, 2022, 6:50 PM

#

Something like... so what else do you want?

analog oracle Oct 19, 2022, 6:51 PM

#

rose oriole Something like... so what else do you want?

I want this: ```ts
duplicates() {

 const cphas_dupli: [1,2,4,5];

 this.certService.dupliById(cphas_dupli)
   .subscribe({
     next: (certDupli) => {
       this.certsDupli = certDupli;
     }
   });

}```

rose oriole Oct 19, 2022, 6:52 PM

#

Those are the same thing

analog oracle Oct 19, 2022, 6:52 PM

#

Not. don't return

dusk canyon Oct 19, 2022, 6:52 PM

#

You have a syntax error when you assign cphas_dupli

analog oracle Oct 19, 2022, 6:52 PM

#

dusk canyon You have a syntax error when you assign cphas_dupli

whats error?

rose oriole Oct 19, 2022, 6:53 PM

#

duplicadas() {
  const cphas_dupli: number[] = this.certidao.cphas.map((item: IcertidaoCphasDouble): number => item.certDupli_id);
  console.log('cphas_dupli', cphas_dupli);

  this.certService.dupliById(cphas_dupli).subscribe({
    next: (certDupli) => {
      this.certsDupli = certDupli;
    },
  });
}

#

This:

    next: (certDupli) => {
      this.certsDupli = certDupli;
    },

Happens 1 billion processor instructions after the end of duplicadas()

#

Because it is Asynchronous Code.

#

You should not .subscribe to get values out of an Observable in Angular. You should use the AsyncPipe

#

Show you whole component I guess because I don't know what to tell you to do without knowing where this.certidao comes from nor where this.certsDupli is used

analog oracle Oct 19, 2022, 6:57 PM

#

I need .subscribe to load my return information from my search. My code sends the id, takes the information and inserts it into certsDupli

rose oriole Oct 19, 2022, 7:00 PM

#

AsyncPipe (| async in your Component template) will handle subscribing and more importantly unsubscribing for you.

#

Post your code, I can probably suggest something. But if you don't understand this message, then you are going to have a bad time: #1032353954895511642 message

#

duplicadas() {
  const cphas_dupli: number[] = this.certidao.cphas.map((item: IcertidaoCphasDouble): number => item.certDupli_id);
  console.log('cphas_dupli', cphas_dupli);

  this.certService.dupliById(cphas_dupli).subscribe(
    // This part happen much much much later, after the end of this method.
    // And because you hid the subscribe inside a method, you have no way to watch and wait for this later code to happen.
  );
}

analog oracle Oct 19, 2022, 7:29 PM

#

rose oriole Post your code, I can probably suggest something. But if you don't understand th...

my cod 👆🏿

📎 cert-view.component.html

#

#1032353954895511642 message my json 'certidao'

#

my service ```ts

@param certidao ICertidao
- @returns Observable<ICertidao>
  */
  dupliById(cphas_dupli: any[]) {
  return this.http.post<Array<ICertidao>>(${AppService.apiUrl}/certidao/dupliById, {
  cphas_dupli: cphas_dupli,
  });
  }```

#

If you can suggest me something...

rose oriole Oct 19, 2022, 7:40 PM

#

import { Component, Input } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ReplaySubject } from 'rxjs';
import type { Observable } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';

import { ICertidao, IcertidaoCphasDouble } from 'src/app/shared/models';
import { CertidoesService } from '../../services';
import { ModalCertComponent } from '../modal-cert/modal-cert.component';

@Component({
  selector: 'app-cert-view',
  styleUrls: [ './cert-view.component.css' ],
  // templateUrl: './cert-view.component.html',
  template: `
<pre *ngIf="certsDupli$ | async as certsDupli; else loading">
  For Debugging: {{ certsDupli | json }}
</pre>
<ng-template #loading>Loading...</ng-template>
  `,
})
export class CertViewComponent {
  public readonly certsDupli$: Observable<ICertidao[]>;

  private readonly _certidaoSub$: ReplaySubject<ICertidao>;

  constructor(
    private readonly certService: CertidoesService, 
    public readonly dialog: MatDialog,
  ) {
    this._certidaoSub$ = new ReplaySubject<ICertidao>(1);

    this.certsDupli$ = this._certidaoSub$.pipe(
      map((certidao: ICertidao): number[] => certidao.cphas.map((item: IcertidaoCphasDouble): number => item.certDupli_id)),
      switchMap((cphas_dupli: number[]): Observable<ICertidao[]> => this.certService.dupliById(cphas_dupli)),
    );
  }

  public openDialog(certidao: ICertidao): void {
    this.dialog.open(ModalCertComponent, { data: certidao });
  }

  // Dados
  @Input('certidao') public set certidao(c: ICertidao) {
    this._certidaoSub$.next(c);
  }
}

#

IMPO, src/app/shared is an anti-pattern in Angular. So is ../../services. Angular suggests that you group your code into feature modules.
https://angular.io/guide/feature-modules

#

you could also do:

<pre *ngfor="let certDup of certsDupli$ | async">For Debugging: {{ certDup | json }}</pre>

But I like to have both an *ngIf and a *ngFor so I can do a loading template:

<ul *ngIf="certsDupli$ | async as certsDupli; else loading">
  <li *ngFor="let item of certsDupli; trackBy: getCertidaoId">
    <pre>For Debugging: {{ item | json }}</pre>
  </li>
</ul>
<ng-template #loading>Loading...</ng-template>

#Create array with just one of the object's data