Angular result for passing to variable on method

Question

I have a method that makes a query and gets some data.

I know that the data is there because console.log is showing it but it's not been passed to the variable I created so I have add it to an *ngFor loop in the .html of the component.

Here is the code:

...

export class MainComponent {

  queryResult; // results wanted here

  constructor(private myService: MyService) {

    this.testQuery(); // run the method
  }


testQuery() {

    const qry = 'SELECT * FROM mytable';
    this.myService.db.query( qry, ( err, result ) => {
      if ( err ) {
        console.log('err', err);
      } else {
        console.log('result', result); // shows the data
        this.queryResult = result; // result is NOT passed to this.queryResult
      }
    } );
}

How can I pass the result data to this.queryResult?

UPDATE:

I've checked this.queryResult is there's is actually data there.

It looks like this:

console.log(this.queryResult);

And it's returning this:

Is it something to do with the *ngFor then?

Here's that part:

  <ul>
    <li *ngFor="let data of queryResult">
      {{data.City}}
    </li>
  </ul>

Result is passed to this.queryResult. What makes you think otherwise? — jonrsharpe
– jonrsharpe, Commented Jun 14, 2020 at 22:54
I get no output in .html <ul> <li *ngFor="let data of queryResult"> {{data}} </li> </ul> — joe2020wow
– joe2020wow, Commented Jun 14, 2020 at 23:06
add a console.log(this.queryResult) right after assigning this.queryResult to result — ukn
– ukn, Commented Jun 15, 2020 at 3:24
what's return type of query? is it an async function? have you tried this.queryResult = await this.myService.db.query(qry) ? — andrès coronado
– andrès coronado, Commented Jun 15, 2020 at 7:00

AlleXyS · Accepted Answer · 2020-06-15 10:00:06Z

1

Because you don't give a type to your queryResult, you can not use ngFor. Try this:

loadingData = true;
queryResult: any[] = [];

testQuery() {
    const qry = 'SELECT * FROM mytable';
    this.myService.db.query(qry, (err, (result: any[])) => {
      if ( err ) {
        console.log('err', err);
      } else {
        this.queryResult = JSON.parse(JSON.stringify(result)); // but I think your result is already converted
        this.loadingData = false;
      }
    } );
}

then, you need to use ngIf in your template. Why? Because your html content must be builded when you have the data loaded.

<div *ngIf="!loadingData">
   <div *ngFor=.....>
   </div>
</div>

edited Jun 15, 2020 at 10:00

answered Jun 15, 2020 at 7:51

AlleXyS

2,5983 gold badges20 silver badges44 bronze badges

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

3 Comments

joe2020wow Over a year ago

Doesn't work. I can see the data in the console but nothing in the .html part of the component

AlleXyS Over a year ago

updated answer. you need to use an boolean to wait for data, then render the html, because your template is rendered before to load data

joe2020wow Over a year ago

For some strange reason I have to call the method twice in order to get the data on the .html page...otherwise it would be working

Collectives™ on Stack Overflow

Angular result for passing to variable on method

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