0

I have data in ts, i need to fetch that data inside the Angular4 html, but i am able to fetch only 2 data which are outside the loop. Can anyone help me to fetch data inside angular4.

HTML:

              <tr *ngFor="let accept of accepts">
                <td>{{accept.name}}</td>
                <td>{{accept.description}}</td>
                <td>{{accept.daterecv}}</td>
                <td>{{accept.dateacc}}</td>
                <td>{{accept.deadline}}</td>
                <td>{{accept.price}}</td>
                <td>{{accept.status}}</td>
                <td>{{accept.due_date}}</td>
              </tr>
            </tbody>

Ts:

this.service
            .getProfileData(id)
            .subscribe(
              data => {
                this.accepts = data;
                console.log(this.accepts);
              }, error => {})

Consoled Output:

enter image description here

1
  • Seems you given wrong object keys inside the HTML Commented Mar 13, 2018 at 5:05

2 Answers 2

1

Some of the fields rendered are wrong,make sure the keys are present in the data in the ts also use safe navigation operator to make sure data is present, it should be as

<tr *ngFor="let accept of accepts">
            <td>{{accept?.Job?.User?.name}}</td>
            <td>{{accept?.user?.description}}</td>
            <td>{{accept?.Job?.price}}</td>
            <td>{{accept?.Job?.status}}</td>
            <td>{{accept?.Job?.due_date}}</td>
</tr>
Sign up to request clarification or add additional context in comments.

7 Comments

Thanks for the response.I am getting error as "ERROR TypeError: Cannot read property 'name' of undefined"
what do you mean
sorry, i am not getting description in that td
can date format be changed? instead of 2019-03-01T16:32:30.239Z, can i get 01-03-2019 or viceversa?
ya i will try that, can that description be brought into html?
|
1

This might help

 <tr *ngFor="let accept of accepts">
            <td>{{accept?.Job?.User?.name}}</td>
            <td>{{accept?.Job?.description}}</td>
            <td>{{accept?.Job?.deadline}}</td>
            <td>{{accept?.Job?.price}}</td>
            <td>{{accept?.Job?.status}}</td>
            <td>{{accept?.Job?.due_date}}</td>
          </tr>

5 Comments

Thanks for response, trying
can date format be changed? instead of 2019-03-01T16:32:30.239Z, can i get 01-03-2019 or viceversa?
@Bhrungarajni Yes you can use momentjs for any type of conversion. I have tried momentjs
ya i will try to do that
Can you please help me how to tackle date with moment.. i have tried for calender's but not getting to do with data cmng from backend

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.